Próbuję dodać pół przezroczystą warstwę między obrazem tła a treścim. Ale jak warstwa nie jest wyświetlana Obraz tła i kolor tła?

Jeśli korzystam z indeksu Z-index: -1 idzie za wszystkimi ... i użyłem 1, przychodzi przed wszystkimi

<div class="bg">
  <div class="mask"></div>
  <div class="content">
    <h2>Hello There</h2>
  </div>
</div>

A kody CSS są

.bg{
  background: url('http://support.kaziwood.com/wp-content/uploads/2018/06/member-1.png') no-repeat;
  height:200px;

}
.content{padding:70px 130px}
.mask{
  background:#000;
  position:absolute;
  content:'';
  width:100%;
  height:100%;
  left:0;
  top:0;
  opacity:0.3;
  z-index:-1;
}

https://jsfiddle.net/2kCX1L2N/

0
Tick Twitch 3 czerwiec 2018, 19:08

3 odpowiedzi

Najlepsza odpowiedź

Możesz po prostu użyć linear-gradient jako drugiego tła na obrazie:

.bg {
  background: 
  linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
  url('http://support.kaziwood.com/wp-content/uploads/2018/06/member-1.png') center/cover no-repeat;
  height: 200px;
}

.content {
  padding: 70px 130px
}
<div class="bg">
  <div class="content">
    <h2>Hello There</h2>
  </div>
</div>
0
Temani Afif 3 czerwiec 2018, 16:14

Musisz dodać position:relative do rodzica div i zawartość div. Wypróbuj ten kod CSS.

.bg {
  background: url('http://support.kaziwood.com/wp-content/uploads/2018/06/member-1.png') no-repeat;
  height: 200px;
  position: relative;
}

.content {
  padding: 70px 130px;
  position: relative;
}

.mask {
  background: #000;
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0.3;
  z-index: 0;
}
0
Aryan Twanju 3 czerwiec 2018, 16:13

Można to osiągnąć przy mniejszej liczbie elementów i uproszczonej struktury przy użyciu treści Pseudo.

Fiddle.

<div>
  <h2>Hello, there</h2>
</div>

Potem CSS:

/* main container */
div {
  background: url('my-pic.png') center/cover;
  height:200px;
  width: 400px;
  position: relative;
  text-align: center; 
  padding-top: 3em;
  box-sizing: border-box;
}

/* pseudo content for overlay */
div::before{
  content:'';
  background:#000;
  position:absolute;
  content:'';
  width:100%;
  height:100%;
  left:0;
  top:0;
  opacity:.3;
}

/* content - make sure it sits above overlay */
div > * { position: relative; z-index: 1; }
div h2 { color: white; }
0
Utkanos 3 czerwiec 2018, 16:22