CSS背景图像适合div [重复]

Posted 2023-03-05

【中文标题】CSS背景图像适合div [重复]

【英文标题】：css background image fit to div [duplicate]

【发布时间】：2012-06-02 01:02:41

【问题描述】：

可能重复：Stretch and Scale a CSS image Background - With CSS only

我想设置 div 背景图片 div(width: 1000, min-height: 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;

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>

【问题讨论】：

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

图片应该覆盖div。

【参考方案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"  class="adjusted">
</div>

我希望这会有所帮助！

【讨论】：

请注意，由于元素在文档下方呈现的错误，负 zindex 可能会在某些版本的 Firefox 中隐藏该元素。现在可能是安全的，我没有用 3.6 和更新的版本测试过。

嗯，至少按照标准，z-index 没有限制，无论是正值还是负值

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

这是一张背景图片。这段代码怎么可能？

是的，试试吧！它是通过属性 z-index 实现的图像底层，此外，它位于顶部，使其看起来像背景......