如何将 HTML5 全屏 API 应用于 div 背景图像答案

【问题标题】：How to apply HTML5 fullscreen API to div background image如何将 HTML5 全屏 API 应用于 div 背景图像
【发布时间】：2014-08-14 03:48:16
【问题描述】：

想要将 HTML 5 全屏 API 应用到 div 的背景图片

<div class="bgimg" style="background-image:url('img/home-1.jpg')" />
   <img src="img/fullscreen.png" id="fullscreen-btn">
</div>

我想要 onclick fullscreen-btn div bgimg 的背景图片，即 home-1.jpg 应该全屏打开。我尝试了下面的代码，但在 Kindlt 建议中不起作用

<scritpt>
$(function() {
    var bg = $('.bgimg');
    $('#fullscreen-btn').click(function () {   
      goFullScreen(bg.attr('style', 'background-image:url()')); 
    });
});

function goFullScreen( element )
{
    if ( element === undefined )
    {
        // If no element defined, use entire document
        element = document.documentElement;
    }

    if ( element.requestFullScreen )
    {
        // Spec, supported by Opera 12.1+
        element.requestFullScreen();
    }
    else if ( element.mozRequestFullScreen )
    {
        // Supported by Firefox 10+
        element.mozRequestFullScreen();
    }
    else if ( element.webkitRequestFullScreen )
    {
        // Supported by Chrome 15+ & Safari 5.1+
        element.webkitRequestFullScreen();
    }
    // Still no IE support, sorry folks :( 
}

【问题讨论】：

请定义“不工作”
它只是删除背景图像。如果我使用 goFullScreen(document.getElementById("id"));然后它在具有该 ID 的元素中显示全屏内容。即使将 id 分配给 div.bgimg 并尝试 goFullScreen ，它也会显示全屏 div 以及其中的所有内容。我只想全屏显示背景图片。
我对这个 API 不是很熟悉，但我猜你需要在这一行中包含图像路径：goFullScreen(bg.attr('style', 'background-image:url()')); 类似于你在 html 中的方式。
试过了。但不工作

标签： css html background fullscreen

【解决方案1】：

似乎对我有用。您只需要在 javascript 中添加图片路径并用引号引起来。

$(function() {
    var bg = $('.bgimg');
    $('#fullscreen-btn').click(function () {   
      goFullScreen(bg.attr('style', "background-image:url('img/home-1.jpg')")); 
    });
});

FIDDLE

【讨论】：

【解决方案2】：

我相信，但我承认我不是 100% 肯定，全屏 API 只能全屏显示 HTML 元素。这就是为什么它将全屏div.bgimg 但不会全屏显示元素的背景图像。但是，<img> 是一个 HTML 元素，所以我认为这会起作用。您有什么理由不想使用它而不是设置 div 的背景图像？

如果是这样，您可以尝试将一些将可见 div 与背景图像（就像您现在拥有的一样）连接到不可见图像的 JS 连接起来，然后将它们加载到您的全屏脚本中。

【讨论】：

这是我迄今为止得出的结论，如果无论如何我可以设法创建DOM 对象，那么全屏工作示例document.getElementById("id") 如何创建DOM bg 图像的对象？（正如您所建议的，如果没有任何问题，则使用不可见元素是最后一个选项。）
有什么理由不直接将图像作为 DOM 的一部分插入？ <div class="bgimg" /> <img src="img/home-1.jpg" id="fullscreen-btn"> </div>
我正在尝试创建全屏背景图像滑块。主 div 是“bgimg”，其中包含更多元素，如标题、文本和缩略图。
所以你想要在“正常模式”1）标题，2）其他文本，3）缩略图，4）背景图像。在全屏模式下，您只需要背景图像吗？在提出更多建议之前，尽量确保我理解目标。
只是div.bgimg的背景图片