我在使用伪元素时遇到了麻烦

问题描述投票：0回答：2

body {
  background: #111;
  filter: opacity(1);
  color: #eee;
}

#about::before {
  background: url(/img/backgroud1.svg);
  width: 100%;
  height: 800px;
  filter: opacity(0.01);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <div id="about">
        <h1>hello World</h1>
      </div>
    </main>
  </body>
</html>

为什么我的背景图片不显示？我希望我的标题位于背景图像之上。

2个回答

0
投票

A
```
::before
```
伪元素不会显示 任何内容，如果它没有任何
```
content
```
，所以给它一些内容
```
height
```
和
```
width
```
对
```
display: inline
```
的元素不执行任何操作，而
```
::before
```
默认为
将不透明度设置得尽可能低，它就会像隐形一样好。增加不透明度，以便您可以看到它。
如果您希望文本位于图像顶部，则需要绝对定位元素（使用定位容器来锚定它）

body {
  background: #111;
  filter: opacity(1);
  color: #eee;
}

#about {
    position: relative;
}

#about::before {
  background: url(http://placekitten.com/200/200);
  width: 100%;
  height: 800px;
  filter: opacity(0.50);
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <div id="about">
        <h1>hello World</h1>
      </div>
    </main>
  </body>
</html>

-1
投票

你应该在url部分添加字符串标记

 background: url("/img/backgroud1.svg");

最新问题

© www.soinside.com 2019 - 2024. All rights reserved.