【问题标题】:css background image fit to div [duplicate]CSS背景图像适合div [重复]
【发布时间】: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。

标签: css image html background


【解决方案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>

我希望这会有所帮助!

【讨论】:

  • 请注意,由于元素在文档下方呈现的错误,负 zindex 可能会在某些版本的 Firefox 中隐藏该元素。现在可能是安全的,我没有用 3.6 和更新的版本测试过。
  • 嗯,至少按照标准,z-index 没有限制,无论是正值还是负值
  • 你是对的。 CSS 2.0 没有指定限制,而 2.1 指定允许负值,但是旧版本的 FF 有这个 bug。
  • 这是一张背景图片。这段代码怎么可能?
  • 是的,试试吧!它是通过属性 z-index 实现的图像底层,此外,它位于顶部,使其看起来像背景......
猜你喜欢
  • 1970-01-01
  • 2017-04-23
  • 1970-01-01
  • 2012-01-02
  • 2012-07-19
  • 1970-01-01
  • 2020-01-04
  • 2012-01-02
  • 2015-11-13
相关资源
最近更新 更多