10

我想在我的页面中放大和缩小背景图像。我尝试了多种方法，但似乎没有什么能按我想要的方式工作。:( 我页面的网址是http://quaaoutlodge.com/drupal-7.14/并且每个链接都有不同的背景图片。我知道图片的大小和质量需要优化，但我首先想弄清楚它的技术部分。如果有人可以帮助解决这个问题吗？

非常感谢你！罗恩

4

4 回答 4

14

每个页面上的相同背景图像

如果您想要调整大小并填充整个窗口空间的背景图像，无论大小如何，请使用此 CSS，

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

每页都有不同的背景图片

如果您想为每个页面使用不同的背景图片，

HTML

<div id="bg">
    <img src="<?=$imgsrc;?>" alt="">
</div>

CSS

#bg {
    position:fixed; 
    top:-50%; 
    left:-50%; 
    width:200%; 
    height:200%;
}

#bg img {
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 
    min-width:50%;
    min-height:50%;
}

来源：CSS-Tricks

于 2012-07-08T21:37:48.607 回答
2

可以在 MDN 上找到实现此目的的另一种方法：

.foo {
  background-image: url(bg-image.png);

  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

  -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}

IE 后备： 

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

来自https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

于 2013-11-13T14:25:03.457 回答
1

很高兴看到 html 背景图像被很好地使用。因为一些开发人员依赖后沿 css 来保持向后兼容性，所以对于其他css3兼容的浏览器存在许多怪癖。就像background:cover在旧的 Safari 版本 (<4.05) 中一样，它不起作用。在这种情况下，我们可以使用旧的css3供应商回退，如图所示

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-backgound-size:100% 100%; /* early css3 implementation */
    -webkit-background-size:cover;
}

而且，如果碰巧你想要纯 CSS 中不同页面的不同背景图像，让我们一起去吧

html#bg1 {backrgound-image:url(images/bg1.jpg);}
html#bg2 {background-image:url(images/bg2.jpg);}

但是，如果你不能给你的<html>标签一个id或者class你可能不得不求助于一些javascript. 然后，您可以为元素上的每个页面使用不同的背景图像<html>，这正是需要的。这似乎在html标签上工作正常。有些浏览器在使用时会忽略cssfor 。标签不那么喜怒无常。这可能比基于 php 的方法更好。例如：background-imagehtmlbody

<script>
    document.getElementsByTagName('html')[0].style.backgroundImage='url(images/bg3.jpg)';
</script>

background-size 的 html css 将继续适用，并将正确覆盖各种浏览器版本。但是请注意，较旧的 Safari 会在javascript使用空 url 时抛出错误，比如清除背景图像，例如

<script> /*Causes Error Safari 4*/
    document.getElementsByTagName('html')[0].style.backgroundImage='url()';
</script>

该错误通常会javascript在不知道原因的情况下停止执行。相反，我们需要使用style.backgroundImage='none';

于 2014-10-17T23:14:59.827 回答
0

在 CSS 中使用媒体查询为不同的屏幕尺寸指定背景图像：

@media all and (max-width: 699px) and (min-width: 520px) {
background-image:url('rightsizebackground.jpg');
}
于 2012-07-08T21:37:31.677 回答