html - CSS HTML如何使比div更大的图像在div中完整显示

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

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

background-size: 100% 100%;

有关 IE 支持，请参阅此 StackOverflow 线程。

Answer 2

检查一下：在背景中拉伸和缩放 CSS 图像 - 仅使用 CSS

如果您希望此技术适用于 div 而不是 body，请添加position: relative;到 div 的 css。