如何在背景不透明度为 0.6 的元素上设置文本？

Question

.c{
    display: flex;
    padding-top: 18em;
    .backgroundDiv{
        background: url("/images/DSC8253.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center ;
        height: 20em;
        opacity: 0.6;
         position: absolute;
         width: 100%;
         z-index: -1;
         
    }
}
.bigText{
    display: flex;
    text-transform: uppercase;
    font-size: 3em;
    font-family: cursive;
    font-weight: 600;
    height: 8em;
    top:2em;
}

 <section class="c">
         <div class="backgroundDiv"></div>
         <div class="bigText">
             <p>Pilki-HUILKI</p>
             </div>
     </section>

Answer 1

在 css 文件中，您输入如下内容（只是小改动）

.c {
  display: flex;
  position: relative;
  height: 100vh;
}

.backgroundDiv {
  background: url('/images/DSC8253.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 20em;
  opacity: 0.6;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.bigText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  text-transform: uppercase;
  font-size: 3em;
  font-family: cursive;
  font-weight: 600;
}

我使用 position absolute 使文本位于背景之上，然后我使用 transform 使其位于中心

如何在背景不透明度为 0.6 的元素上设置文本？

How to set text over element with background opacity 0.6?

html

css

opacity