完全响应的背景图片答案

【问题标题】：Full responsive background image完全响应的背景图片
【发布时间】：2013-05-09 23:38:46
【问题描述】：

我试图了解如何使完整的背景图像响应。起初我使用的是 jQuery Anystretch。

代码。

functions.php

wp_register_script( 'jquery.anystretch', get_template_directory_uri() .'/js/jquery.anystretch.js', array( 'jquery'));
wp_enqueue_script( 'jquery.anystretch');

main.css

.imgheader { background: url("images/image.png")  height:450px; width:100%; background-repeat: no-repeat; background-size: cover; overflow: hidden; position: relative}

index.php

<figure class="container imgheader"> </figure>

header.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<?php wp_enqueue_script('jquery'); ?> 
<script type="text/javascript">
jQuery(document).ready(function($)
{
(function() 
{
$('.imgheader').anystretch("images/image.png");
})
});
</script>

另外，我尝试使用：

   $('figure.imgheader').anystretch("images/image.png");

来自文档：

<script type="text/javascript">
jQuery(document).ready(function($) {
  $('.imgheader').anystretch("images/image.png", {speed: 150});
});
</script>

第三次编辑：

<script type="text/javascript">
jQuery(document).ready(function($) {
  $('figure.imgheader').anystretch("images/image.png", {speed: 150});
});
</script>

第四次更新：问题与 jquery-backstretch 相同。我正在为完整的背景图像和容器内的图像加载插件，但没有工作。在 Firebugs 的帮助下，我看到 js 正在页面中加载。我又看了几个小时，我回来了。

但问题是一样的，脚本不加载。我做错了什么？

提前致谢。

【问题讨论】：

您是否确认图像实际上位于您要拉伸的路径上？我们可以看一个活生生的例子吗？
对不起，我能做到。我在本地工作。
假设您已确认图像确实存在，请尝试删除除 .imgheader 的基本 css 规则之外的所有内容，并确保 .imgheader 是 div，而不是 span 或其他内容。只用宽度和高度试试。
我试试。什么也没发生。问题仍然存在
好的，如果我看不到实时代码，我无法为您调试每一行，但我继续设置了一个有效的 anystretch 演示：jsfiddle.net/ZQ8BQ 尝试从那里向后工作.

标签： jquery css wordpress

【解决方案1】：

几件事，没有必要排队 jquery，它与 WordPress 核心捆绑在一起，如果你正确设置你的 javascript，所有文件都可以使用它。在您的functions.php 中，确保将其包装在一个添加操作调用中，如下所示：

add_action('wp_enqueue_scripts','my_scripts_function');
function my_scripts_function() {
    wp_register_script( 'jquery.anystretch.js', get_template_directory_uri() .'/js/jquery.anystretch.js'); // you don't need the third parameter here
    wp_enqueue_script( 'jquery.anystretch.js');
}

理想情况下，您只需将自己的另一个 javascript 文件排入队列，而不是放入 header.php，但这样做有时会起作用。您的问题是我认为附加的 function() 包装，没有必要。

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.imgheader').anystretch("images/image.png");
});
</script>

如果这不起作用，请确认 jquery 和 anystretch 正在加载到您尝试运行它们的页面上。

【讨论】：

你给我的解决方案并不能解决我的问题。我还检查了页面上的 js 加载。
好的，什么是“未解决”？你说问题是脚本没有加载。如果它正在加载，则说明其他地方存在问题。
哦，对不起。我有点困惑，因为我做了很多事情。使用 Firebug，我看到 js 正在加载。
好的，具体是什么不起作用？在 anystretch 文档中总是通过速度，你试过吗？
开始评论了。

【解决方案2】：

我不太确定这里发生了什么，但如果你没有得到这个工作，我可以建议使用jquery backstretch。我自己在项目中使用过几次，它总能完成工作。

【讨论】：

谢谢。我会努力的，我会回来的。

【解决方案3】：

我以不同的方式尝试了多个 jquery 插件，例如 jquery.ez-bg-resize、jquery.backstretch、jquery.anystretch。即使现在我也想不出js为什么要这样做。对于这些插件，js 正在加载，但结果是相同的。我的问题没有解决。然后我想在 css 媒体查询的帮助下做到这一点，通过这种方式，问题大致解决了。

imgheader { background: url("images/images.png")  50% 50% no-repeat scroll !important;
    background-position:center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

【讨论】：