CSS背景图像拟合到的div

可能重复：
Stretch and Scale a CSS image Background - With CSS only CSS背景图像拟合到的div

我想设置的div背景图像的div（宽度：1000，最小高度：710）和图像尺寸是753 x 308 whan我试图设置它图像不适合div大小我应该怎么做？

.Invitation { 
    background-color: transparent; 
    background-image: url('../images/form.png'); 
    background-repeat: no-repeat; 
    background-position: left top; 
    background-attachment: scroll; 
    background-size: 100%; 
    width: 1000px; 
    height: 710px; 
    margin-left: 43px; 
}

的DIV类是

.content { 
    clear:both; 
    width:1000px;  
    background:#e7e8e9; 
    background-image:url('../images/content.jpg'); 
    background-repeat:no-repeat; 
    background-position:left top; 
    min-height:710px; 
}

而且代码

<div class="content"><div class="Invitation">form goes here....</div></div>

来源

2012-05-27 Rekha Prabhu

您是否想要缩放背景图像以适应（比例）或拉伸（扭曲）到DIV？ – rcdmk

图像应该覆盖div。 –

尝试是这样的：

CSS

<style type="text/css"> 
    img.adjusted { 
    position: absolute; 
    z-index: -1; 
    width: 100%; 
    top: 0; 
    left: 0; 
    } 
    .Invitation { 
    position: relative; 
    width: 1000px; 
    height: 710px; 
    margin-left: 43px; 
    } 
</style>

HTML

<div class="Invitation"> 
    This is an example 
    <img src="http://files.myopera.com/arshamr/albums/612249/Nature%20(3).jpg" alt="" class="adjusted"> 
</div>

我希望这有助于！

来源

2012-05-27 04:02:08

请注意，负面zindex可能会隐藏某些版本的Firefox中的元素，因为元素呈现在文档下方的错误。现在可能是安全的，我还没有用3.6或更新版本进行测试。 – rcdmk

那么，至少根据标准，Z指数没有限制，无论是正值还是负值 –

你是对的。 CSS 2.0没有指定限制，2.1指定允许负值，但旧版本的FF有这个错误。 – rcdmk

CSS背景图像拟合到的div

回答

相关问题