html - DIV 的 CSS 背景图像不适用于自动

Question

background-image 不适用于百分比 div 大小吗？只有在 .contrast 类中对 width 和 height 进行硬编码时，图像才会显示。如果宽度和高度是百分比，则图像不会显示。有什么见解吗？

CSS:

.parent{
    width=1000px;
}
img.contrast{
    width:400px;
    height:100px;
    background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
}

HTML:

<div class="parent">
    <img class="contrast"/>
    <img class="contrast"/>
    <img class="contrast"/>
</div>

JsFiddle

Edit1:所以.contrast不能继承父分区的大小？如果我将一个父分区中的 3 个分区设置为 25% 宽度，它就无法访问父分区的宽度吗？

Answer 1

除非您将其用作 SRC，否则容器无法知道您的背景大小。

也就是说，您可以为此目的使用 div，并使用 background-size、background-position 属性来获得所需的效果(即使背景适合 div 大小)。您不能做的是让 div 从其背景属性“继承”大小。

看看我用你的 fiddle 制作的 fiddle :http://jsfiddle.net/amenadiel/x9a56/2/

img.contrast{
    width:450px;
    height:100px;
    background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
}

img.contrast2{
    width:50%;
    height:100px;
    background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
}

img.contrast3{
    width:20em;
    height:100px;
    background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
}

您可以让 div(或 img)采用绝对宽度，或相对于父级的宽度，或相对于窗口的宽度。这不是问题，因为容器有一个宽度，您可以从中关联。但它不会为每个人提供高度，他们不会有。

反过来，容器 div 扩展以适应其子元素的总高度。但是，作为替代解决方法，如果您为容器提供固定高度，则可以为子 img 分配相对高度。

TL/DR

使用带有 src 属性的 img 从图像 url 猜测大小，或者选择你最喜欢的解决方法