Question

我想要一个蓝色背景，背景上方的图像，然后是图像上方的文字。

以下是代码：

body {
  background-color: blue;
}

#some-text {
  color: red;
  z-index: 3;
}

#display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('./some-image.jpg'); 
  z-index: 2;
 }

<body>
 <div id="some-text">TEXT</div>
 <div id="display"></div>
<body>

给我带来麻烦的是文字有蓝色背景。

将文本的背景设置为透明不会更正它。

我在这里做错了什么？

Answer 1

将＃some-text div的背景颜色设置为白色。

#some-text {
    color: red;
    z-index: 3;
    background-color: white;
}

Answer 2

您可以使用多个这样的背景：

＆＃13;

body {
 margin:0;
 height:100vh;
 line-height:100vh;
 background-image:url(https://picsum.photos/200/200?image=1069);
 background-position:center;
 background-size:auto;
 background-repeat:no-repeat;
 background-color:green;
 text-align:center;
 color:#fff;
 font-size:25px;
}

＆＃13;

Some text here

＆＃13;

Answer 3

将ID为div的{{1}}设置为#some-text，同时您需要为position: relative添加div个{{1} }和#display。

＆＃13;

width

＆＃13;

height

＆＃13;

分层背景颜色，背景图像和文本

3 个答案: