Question

所以我有一个带背景图像的div;这个div的高度和宽度可以根据div的空间内容/大小而增长。

但是，无论我希望背景图像的大小是100％显示，这是因为背景图像周围有边框，我需要显示那些按钮效果。

div.leadgen {
  background: url(/Website6/Styles/leadgen_center.png) repeat-x;
  color: #FFF;
  cursor: pointer;
  display: inline-block;
}

<div class="leadgen">
 <h3>
  This is the title
 </h3>        
 This is the description
</div>

修改

#solutionsNav div.leadgen {
background:url(/images/leadGen_bg2.png) no-repeat;
background-size: 100% 100%;  
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale')";
behavior: url(/scripts/PIE.htc);
padding: 10px;
color: #FFF;
cursor: pointer;

}

这适用于所有浏览器！我唯一需要弄清楚的是在IE 7和8中我不想使用background：url（/images/leadGen_bg2.png）no-repeat;因为它似乎加倍了。

Answer 1

您可以使用自CSS3以来可用的CSS属性background-size：

background-size: 100% 100%;

有关IE支持，请参阅this StackOverflow thread。

Answer 2

检查出来：Stretch and scale a CSS image in the background - with CSS only

如果您希望此技术在div而不是body上工作，请将position: relative;添加到div的css中。

CSS HTML如何制作比div中的div显示更大的图像

2 个答案: