Question

我正在使用background-image道具来获取bg中的图像和前景中的文本：小提琴： https://jsfiddle.net/zvy0j3r1/5/

但是我看不到任何图像显示。我不确定我在这里想念的是什么 CSS：

.main {
    padding: 40px 70px;
    display: inline-block;
    width: 100%; //customizable user controlled width (not necessarily be 100% all time)
    color: #AFBEC6;
    text-align: center;
    border: 3px solid #E7ECEE;
    background-color: #F7F8F9;
}

.icon {
    background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.text {
      font-size: 24px;
    position: relative;
    top: -18px;
}

Answer 1

由于该元素没有任何高度，因此未显示背景图像。您可能会认为，对元素使用height: 100%会使它占据与父元素相同的高度，但是那样行不通。

当子元素具有height: 100%时，如果父元素设置了明确的高度（例如像素，ems，vm等），它将仅占父元素的100％。

Answer 2

只需将.main设置为相对，将.icons设置为绝对。

.main {
    padding: 40px 70px;
    display: inline-block;
    width: 100%;
    color: #AFBEC6;
    text-align: center;
    border: 3px solid #E7ECEE;
    background-color: #F7F8F9;
    position: relative;
}

.icon {
    background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
}

.text {
      font-size: 24px;
    position: relative;
    top: -18px;
}

<div class="main">
<div class="icon"></div>
<div class="text">No Data available</div>
</div>

无法使用背景图片属性CSS在bg中添加图片

2 个答案: