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

背景尺寸“封面”属性可能是您正在寻找的内容：

background-size: cover

Answer 2

具有背景的div如此之大的原因是因为它绝对定位。它的父（#main）需要相对定位，否则div＃first除了身体的范围之外没有任何东西可以基于它的100％宽度和高度。

一旦#main为position：relative，＃first将符合它的大小（假设你给它一个宽度和高度）。

Answer 3

正如 @Paulie_D 所说。您可以简单地限制div#first

但您可以根据图片设置尺寸：
background-size: 100% 100%;

如果您想要图像的原始尺寸，请使用：
background-size: auto;

如果你只是想要一个响应背景设置：
background-size: cover;
或
background-size: contain;

无法使用CSS限制图像大小

3 个答案: