Question

我试着了解如何才能完整响应背景图像。起初我正在使用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>

第3次编辑：

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

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

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

先谢谢。

Answer 1

偶然的事情，没有必要排队jquery，它与WordPress核心捆绑在一起，如果你正确设置你的javascript，所有文件都可用。在你的functions.php中，确保将它包装在这样的add动作调用中：

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，但它可以有时这样做。你的问题是我相信的附加功能（）包装，看不出任何需要它。

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

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

Answer 2

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

Answer 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;

完全响应背景图像

3 个答案: