CSS图像大小调整

我有这样的CSS代码：CSS图像大小调整

<style> 
    body { 
    position:absolute; 
    background-image: url(art/c11.jpg); 
    width:100%; 
    height:100%; 
    } 
</style>

正如我在网上读，我预期这将调整的背景图像，并要将其安装到浏览器窗口。

但是没有。我认为我显然做错了什么（我不知道足够的CSS）。有小费吗？

UPDATE：

我加洞例如（不工作）：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>No Title</title> 
<style type="text/css"> 
    body { 
    position:absolute; 
    background-image:url(art/c11.jpg); 
    background-size:100%; 
    background-repeat: no-repeat; 
    width:100%; 
    height:100%; 
    } 
</style> 
</head> 
<body > 
</body> 
</html>

来源

2010-07-20 mRt

你正在定位你的身体元素的任何原因？这不应该是必须的，但通常是将body的边距和填充设置为0的好主意。这可以使一些浏览器使古怪的默认值正常化。 – jasongetsdown 2010-07-20 03:21:50

如果你要使这项工作跨浏览器，你最好把图像放在页面上，然后将所有的内容位于顶部的DIV。例如。

CSS

#background { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

#content { 
    position: relative; 
    z-index: 1; 
}

如果您打算支持IE6，然后加入这个片断：

<!--[if IE 6]> 
    <style type="text/css"> 
    html { 
     overflow-y: hidden; 
    } 

    body { 
     overflow-y: auto; 
    } 

    #background { 
     position:absolute; 
     z-index:-1; 
    } 

    #content { 
     position:static; 
    } 
    </style> 
<![endif]-->

HTML

<img id="background" src="art/c11.jpg" alt="" /> 

<div id="content"> 
    Your content 
</div>

Code in action.

来源

2010-07-20 03:15:17

您可以使用background-size:100%的CSS3属性，但此属性的支持不是一刀切又赢得了”不适用于旧版浏览器。为了实现你想要的东西，你需要一堆黑客才能实现它。有许多像这样的博客one会告诉你你需要做什么。我不建议这样做，因为如果你有一个大的图像/慢连接，你会看到图像加载。如果图像的质量不是最好的，那么在整个屏幕或不同的分辨率下都不会看起来很好。

来源

2010-07-20 02:53:22 amurra

我不知道为什么，但这两个例子都不适用于我...无论如何。 – mRt 2010-07-20 03:05:26

添加background-repeat属性。

完成的代码应该是这样的：

 
    body { 
    position:absolute; 
    background-image: url(art/c11.jpg); 
    background-size:100%; 
    background-repeat: no-repeat; 
    width:100%; 
    height:100%; 
    }

来源

2010-07-20 02:53:24

我不知道为什么，但这两个例子都不适用于我...谢谢。 – mRt 2010-07-20 03:04:19

刚刚用amurra的建议更新了代码。它现在工作吗？ – 2010-07-20 03:06:48

没有。事实上，使用该代码，它不会显示任何内容。 – mRt 2010-07-20 03:10:34

我不认为有一种方法可以拉伸或控制使用CSS背景图像的大小。然而，可以使用的背景位置，背景附件和背景重复调性质来实现的替代结果..

，或者您可以使用一些JavaScript把图像划分成较低的z折射率层并设置图层作为你backgournd，但这是一点点在那里黑客

来源

2010-07-20 02:56:32

通过使用CSS3就可以实现图像的角度调整，

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

这适用于所有的浏览器和IE9 +。以下过滤器也适用于ie7和ie8。

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

来源

2012-12-27 04:53:58 Gopalch

CSS图像大小调整

回答

相关问题