如何解決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>