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

RGB8 = uint8(round(RGB64*255));是no-repeat属性的有效值，而不是background-repeat属性的有效值。

它也可以用于速记属性background-image中。所以要解决您的问题，要么去

background

或使用速记属性background-image: url("../images/chisinau.jpeg"); background-repeat: no-repeat;：

background

Answer 2

尝试一下，我只是删除了 no-repeat （不重复），并将背景重复添加为单独的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>

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

2 个答案: