如何解决CSS中未显示背景图片的问题

Question

我正在尝试设置一个背景图像，该图像将被白色文本覆盖变暗。 但是，背景图像没有显示。

当我在Chrome中检查页面时，背景图片显示错误。

/*HTML*/
<div class="main-body1">
    <h1>Innovating Moldova. Thinking bigger.</h1>
    <h2>A nonprofit collaboration between professionals and 
    organizations focused on benefitting the economic state of the 
    Republic of Moldova.</h2>
</div>



/*CSS*/
.main-body1 {
    padding: 10rem 5%;
    position: relative;
    height: 500px;
    width: 100%;}

.main-body1:after {
    content: "";
    position: absolute;
    background-image: url("../images/chisinau.jpeg") no-repeat;
    height: 500px;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /*Make sure the image sits below the content  */}

Answer 1

no-repeat是background-repeat属性的有效值，而不是background-image属性的有效值。

也可以在速记属性background 。 因此，要解决您的问题，要么

background-image: url("../images/chisinau.jpeg");
background-repeat: no-repeat;

或使用速记属性background ：

background: url("../images/chisinau.jpeg") no-repeat;

Answer 2

试试这个，我只是删除了不重复，并添加了背景重复作为单独的background-repeat: no-repeat;

 .main-body1 { padding: 10rem 5%; position: relative; height: 500px; width: 100%;} .main-body1:after { content: ""; position: absolute; background-image: url("https://images3.alphacoders.com/117/117169.jpg"); background-repeat: no-repeat; height: 500px; width: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; 

 <div class="main-body1"> <h1>Innovating Moldova. Thinking bigger.</h1> <h2>A nonprofit collaboration between professionals and organizations focused on benefitting the economic state of the Republic of Moldova.</h2> </div>