1

我的目标是为我的 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 像素宽乘以其他较大的数字高），但在较小的窗口中，您看到的只是图像的顶部。

那么，我做错了什么，或者没有做我应该做的事？有没有办法让这个看起来漂亮和花哨？

提前致谢！

4

3 回答 3

1

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

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

background-size:cover;

这就是它的全部！“Cover”将背景图像设置为缩放以填充元素区域而不扭曲纵横比。

于 2012-06-12T18:39:23.457 回答
0

你可能想看看这个问题的答案。看起来可以通过将图像设置为来做你想做的事

position:absolute;
z-index:-1;
height:100%;
overflow:hidden;
于 2012-06-12T18:38:28.930 回答
0

如果您希望它在不使用 CSS3 的情况下具有可扩展性，则不能使用 background-image 属性；您必须使用实际图像并将它们缩放到跨越窗口大小的 div 的宽度或高度（在您的情况下为高度）。

拉伸和缩放 CSS 背景

于 2012-06-12T18:40:32.753 回答