如何拉伸背景图像以填充div

Question

我想将背景图像设置为不同的div,但我的问题是:

1. 图像的大小是固定的(60px).
2. 改变div的大小

如何拉伸背景图像以填充div的整个背景？

#div2{
  background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
  height:180px;
  width:200px;
  border: 1px solid red;
}

在这里查看代码.

Answer 1

加

background-size:100% 100%;

到背景图像下面的css.

您还可以指定确切的尺寸,即:

background-size: 30px 40px;

这里:JSFiddle

Answer 2

您可以使用:

background-size: cover;

或者只使用大背景图片:

background: url('../images/teaser.jpg') no-repeat center #eee;

Answer 3

现代CSS3(推荐用于未来和最佳解决方案)

.selector{
   background-size: cover;
   /* stretches background WITHOUT deformation so it would fill the background space,
      it may crop the image if the image's dimensions are in different ratio,
      than the element dimensions. */
}

最大.拉伸没有裁剪也不变形(可能不会填充背景.): background-size: contain;
强制绝对拉伸(可能导致变形,但没有裁剪): background-size: 100% 100%;

"旧"CSS"总是在工作"的方式

绝对定位图像作为(相对定位)父项的第一个子项并将其拉伸到父项大小.

HTML

<div class="selector">
   <img src="path.extension" alt="alt text">
   <!-- some other content -->
</div>

相当于CSS3 background-size: cover;:

要动态实现这一点,你必须使用相反的contains方法替代(见下文),如果你需要将裁剪后的图像居中,你需要一个JavaScript来动态地做到这一点 - 例如使用jQuery:

$('.selector img').each(function(){ 
   $(this).css({ 
      "left": "50%", 
      "margin-left": "-"+( $(this).width()/2 )+"px", 
      "top": "50%", 
      "margin-top": "-"+( $(this).height()/2 )+"px" 
   }); 
});

实际例子:

相当于CSS3 background-size: contain;:

这个可能有点棘手 - 你的背景维度将溢出父级将CSS设置为100%另一个自动. 实际例子:

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: auto;
   /* -- OR -- */
   /* width: auto; 
      height: 100%; */
}

相当于CSS3 background-size: 100% 100%;:

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: 100%;
}

PS:要完全动态地以"旧"的方式做覆盖/包含的等价物(所以你不必关心溢出/比率)你必须使用javascript来检测你的比率并设置尺寸如下所述. ..

Answer 4

为此,您可以使用CSS3 background-size属性.像这样写:

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    background-size:100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

检查一下:http://jsfiddle.net/qdzaw/1/

Answer 5

你可以加:

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    background-size: 100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

你可以在这里阅读更多相关信息:css3 background-size