CSS背景图片适应DIV

Question

可能重复：
仅使用CSS拉伸和缩放CSS图像背景 我想设置div的背景图像div（宽度：1000，最小高度：710），图像大小为753 x 308。当我尝试设置它时，图像不适合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;
}

The div class is

.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>

- Rekha Prabhu

---

你是想将background-image按比例缩放以适应DIV，还是拉伸（扭曲）以适应DIV？ - Ricardo Souza

图片应该覆盖整个 div。 - Rekha Prabhu

Answer 1

尝试这样做：

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>

我希望这可以帮助您！

- Marco Godínez

---

请注意，由于Firefox的一个错误，负zindex可能会在某些版本中隐藏元素，因为该元素被渲染在文档下方。现在可能是安全的，我还没有测试过3.6或更新版本。 - Ricardo Souza

至少从标准上来看，z-index 没有限制，无论正数还是负数的值都可以。 - Marco Godínez

你是正确的。CSS 2.0 没有指定限制，2.1 指定允许使用负值，但旧版本的 FF 存在这个 Bug。 - Ricardo Souza

这是一个背景图片。这段代码怎么可能实现？ - Rekha Prabhu

是的，试试吧！这是通过属性z-index实现的图像底层，此外它被定位在顶部，这使它看起来像一个背景... - Marco Godínez

为避免由于FF的错误可能导致的CSS黑客攻击，可以使用条件语句来修改z-index值为正，并将"display: none"添加到图像元素中。此外，我认为您还可以使用正值来玩弄z-index，将"This is an example"或任何内容放置在具有相对位置和z-index值大于图像的div元素中。 - Marco Godínez