Question

我在CSS和HTML的标签中都尝试过background-image标签。我什么也看不到包装纸后面。我可以使包装器背景带有颜色，但是可以显示颜色。

html,
body {
    background-image: url("https://vgy.me/u/TpG24N");
    text-align: center;
    height: 100%;

}

#wrapper {
    margin: 2% auto;
    width: 875px;
    height: 80%;
    box-sizing: border-box;
    background-color: rgb(250, 194, 245)
}

#subwrapper {
    position: relative;
}

Answer 1

您在#wrapper中设置了背景颜色，但该背景颜色不会显示任何内容。只需设置：

#wrapper{
 background-color: transparent;
}

现在#wrapper后面的元素将显示出来。

编辑`

：

如果需要，还可以使其semi-transparent，保持其颜色并将opacity设置为介于0和1之间的值，如下所示：

#wrapper {
    background-color: rgb(250, 194, 245)
    opacity: 0.5;
}

现在#wrapper将具有半透明的颜色。尝试使用正确的不透明度值，直到看起来像您想要的一样。

Answer 2

您的背景图片网址https://vgy.me/u/TpG24N不是图片，您是说https://vgy.me/TpG24N.jpg

html,
body {
    background-image: url("https://vgy.me/TpG24N.jpg");
    text-align: center;
    height: 100%;

}

Answer 3

您没有添加图像扩展名URL

html,body {
    background-image: url("https://vgy.me/u/TpG24N");
    text-align: center;
    height: 100%;

}

此外，需要添加

#wrapper{
 background-color: transparent;
}

后台CSS不显示在包装器后面

3 个答案: