缩放背景图像答案

【问题标题】：scale background image缩放背景图像
【发布时间】：2012-07-08 08:51:51
【问题描述】：

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

非常感谢！罗恩

【问题讨论】：

你的意思是当你调整窗口大小时？

标签： html css web background-image

【解决方案1】：

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

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

【讨论】：

但是我想为每个页面加载不同的图像...有没有办法将变量从 html(php) 传递到 css？

【解决方案2】：

每页的背景图片相同

如果您想要调整大小并填充整个窗口空间的背景图像，无论大小如何，请使用此 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

【讨论】：

但我希望每个页面都有不同的图像
然后使用img标签并通过php将图片源传递给它。
我实际上结束了，将 html {} 定义包括到我的 html 内联中 - 效果非常好 :) 谢谢！

【解决方案3】：

可以在 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

【讨论】：

【解决方案4】：

很高兴看到 html 背景图像被很好地使用。因为一些开发人员依赖后沿 css 来保持向后兼容性，所以对于其他 css3 兼容的浏览器存在许多怪癖。就像旧 Safari 版本 (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 标签上运行良好。当在html 上使用时，某些浏览器会忽略css 的background-image。 body 标签不那么喜怒无常。这可能比基于 php 的方法更好。例如：

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

【讨论】：