Question

我想在我的页面中放大和缩小背景图像。我尝试了很多东西，但似乎并没有像我想要的那样工作。 :(我页面的网址为http://quaaoutlodge.com/drupal-7.14/，每个链接都有不同的背景图片。我知道图片的大小和质量需要优化，但我首先想弄清楚它的技术部分如果有人请帮忙解决这个问题？

非常感谢！罗恩

Answer 1

每页上的相同背景图片

如果你想要一个背景图像来调整整个窗口空间的大小和填充，无论大小如何，那么使用这个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

Answer 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

Answer 3

很高兴看到html背景图片使用得很好。因为一些开发人员依赖尾随css来保持向后兼容性，所以对于其他css3兼容的浏览器存在许多怪癖。与早期Safari版本（＆lt; 4.05）中的background:cover类似，但不起作用。在这种情况下，我们可以使用较旧的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标记上正常工作。在css上使用时，某些浏览器会忽略background-image的{{1}}。 html标签不太喜欢。这可能比基于php的方法更好。例如：

body

后台大小的html css将继续适用，并将涵盖各种浏览器版本。但请注意，较旧的Safari会在使用空网址的<script> document.getElementsByTagName('html')[0].style.backgroundImage='url(images/bg3.jpg)'; </script>上抛出错误，例如清除背景图片，例如

javascript

错误通常会暂停<script> /*Causes Error Safari 4*/ document.getElementsByTagName('html')[0].style.backgroundImage='url()'; </script>执行，而不知道原因。相反，我们需要使用javascript

Answer 4

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

@media all and (max-width: 699px) and (min-width: 520px) {
background-image:url('rightsizebackground.jpg');
}

比例背景图像

4 个答案:

每页上的相同背景图片

每页不同的背景图片