Question

我想在iframe中嵌入一个图像，我不确定其大小。我尝试如下，但它似乎不起作用。
请让我知道如何继续。

我真正想做的是，图片应该自动适应页面。图像小于页面，因此当我删除不重复时，屏幕上会显示多个图像实例。

请帮助谢谢。

 body{
            background-image:url(someimageurl);
            width:1400px;
            height:1600px;
            background-repeat:no-repeat;

        }

Answer 1

罗丹走在正确的轨道上。在纯CSS中，你只能使用CSS3，只有最新版本的浏览器才能运行。但是，您可以通过在页面的一角放置一个绝对定位的图像来伪造它，其宽度和高度设置为100％。然后一些z-index工作将内容放在图像的顶部。

HTML：

<img class="background" />
<div class="wrapper">
content goes here
</div>

CSS：

img.background{position:fixed;top:0;left:0;width:100%;height:100%;z-index}
div.wrapper{position:relative;z-index:1;}

在此处查看 - http://jsfiddle.net/snkg8/ 仅供参考 - 如果没有一些额外的CSS黑客攻击，这将无法在IE6中运行，但我不再为IE6而烦恼了。

Answer 2

你有一个背景大小的css属性：

background-size: 100%;

不幸的是，它是CSS3属性，仅在最新的浏览器（IE9，Firefox4）中受支持

Answer 3

使用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')";

css图像背景在身体自动调整大小

3 个答案: