javascript - 将全屏背景图像添加到循环的 Wordpress/Genesis 子主题

Question

我的目标是向我的 Genesis 子主题添加一个全尺寸背景图片，该主题在主页上循环显示四到五个图片，并且是与每个后续页面(或其子页面)相对应的静态图片。

您可以在此处查看进度:http://devel.hodgsonco.com

循环部分可以，这很好，但全屏部分不行。我想让图像与浏览器的大小相匹配，这样图像的边就会被切掉，但高度是准确的。我不希望图像失真。

下面是我如何让循环部分工作的。我在这里遵循了一个教程: http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html

我的 functions.php 中有这个:

add_action('genesis_before_header', 'add_bg_images_html');
function add_bg_images_html () {
  echo '<!-- jQuery handles to place the header background images -->
  <div id="headerimgs">
  <div id="headerimg1" class="headerimg"></div>
  <div id="headerimg2" class="headerimg"></div>
  </div>';
}

然后在我的 CSS 中添加了一些内容:

.headerimg { 
background-position: center top; 
background-repeat: no-repeat; 
/* Set rules to fill background */
min-height: 100%;
/*  min-width: 100%; */
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
width: 100%; 
height:auto; 
position:absolute;
}

然后有一个 javascript 文件在这里做了一些神奇的事情:

http://devel.hodgsonco.com/wp-content/themes/ionclub/js/script.js?ver=3.3.2

我注释掉了该脚本中的很多内容，因为我不需要其中包含的任何动画控件。

因此，我的问题是图像既漂亮又大(1680 像素宽乘以其他较大的数字高)，但在较小的窗口中您看到的只是图像的顶部。

那么，我做错了什么，或者没有做我应该做的事？有没有办法让它看起来漂亮又别致？

提前致谢!

Answer 1

要使用的是 CSS3 属性“background-size”。您可以在 W3 Schools 上阅读它.如果包括 Modernizr ，您还可以提供后备支持。

无论如何，只需按如下方式设置您的背景:

background-size:cover;

仅此而已! “Cover”将背景图像设置为缩放以填充元素的区域而不扭曲纵横比。