css - 无法使用 CSS 限制图像大小

Question

我一直在努力让这张背景图片发挥作用，这让我有点抓狂。似乎无法找出正确的编码。

现在，pdficon 非常大，根本不在它应该“包含”在其中的容器中。我只是不确定如何正确定位背景图片。

HTML代码(自定义代码框):

<a href="<url>" style="text-decoration:none;font-family:arial;font-color:black;">
<div id="main">
<div id="first">
</div>
<div id="second">
<p>TEXT
</p>
</div>
</div>
</a>

CSS:

div#first {
    background-image: url('pdfIcon.png');
    position:absolute;
    width:100%;
    height:100%;
    overflow:hidden;
    background-repeat: no-repeat;
    opacity:0.2;
    -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
     -o-background-size: 100% 100%;           /* Opera 9.5 */
    -webkit-background-size: 100% 100%;           /* Safari 3.0 */
    background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
    -moz-border-image: url('pdfIcon.png') 0;
}
div#second{
width:100%;
height:100%;
position:relative;
top: 0;
left:0;
}

这是 JSFiddle

Answer 1

背景大小“cover”属性可能就是您要找的:

background-size: cover