Home / Questions / 61754
Accepted
May
Asked: 2020-04-10 12:33:09 +0800 CST 2020-04-10 12:33:09 +0800 CST

How to add a dark layer to the background image without affecting the content and outline of the text?

  • 772

In some cases there are images with colors that cannot be adapted to the color of the text, one of the first options is to apply a dark layer with a transparent color.

The problem with applying a dark layer to the image is that the text content also changes its color to a dark color.

My second mistake is the layer trying to apply doesn't seem to be working properly.

.animation::after {
    background-color: rgba(0, 0, 0, 0.4);
    height: 100%;
    left: 0;
    opacity: 1;
    position: fixed;
    top: 0;
    transition: all .5s cubic-bezier(0.39, 0.575, 0.565, 1);
    width: 100%;
    z-index: 10;
}

How do I properly add a dark layer without affecting the text content?

.item {
  width: 100%;
  height: 656px !important;
  background-size: cover;
  background-position: 50% 0;
  background-repeat: no-repeat;
}

.animation {
  display: block;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.animation::after {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
opacity: 1;
position: fixed;
top: 0;
transition: all .5s cubic-bezier(0.39, 0.575, 0.565, 1);
width: 100%;
z-index: 10;
}

.out-about {
  text-align: center;
  margin: 0 auto;
}

.out-about h1 {
  font-size: 35px;
  color:  #97D302;
  font-weight: 100;
}

.out-about h2 {
  font-size: 35px;
  padding-top: 30px;
  padding-bottom: 10px;
  color: #95a5a6;
  font-weight: 100;
}

.LightGrey {
  color: #ccc;
}

.TanDark {
  color: #c59e6f;
}
  <div class="item" style="background-image: url('https://s3-us-west-2.amazonaws.com/devcode/img/fondo/fondo.jpg');">
    <div class="container">
      <div class="row">
        <div class="animation">
          <div class="out-about slideInUp">
            <h3 class="TanDark">"Lorem ipsum dolor sit amet, ius minim gubergren ad."</h3>
          </div>
          <div class="out-about">
            <p class="LightGrey">Lorem ipsum dolor sit amet, vix erat audiam ei. Cum doctus civibus efficiantur in. Nec id tempor imperdiet deterruisset, doctus volumus explicari qui ex.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

html5

2 Answers

  1. Try this:

     .animation {
   display: block;
   height: auto;
   position: absolute;
   left: 50%;
   top: 50%;
   width: 100%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   background: transparent;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.4);
  }
    • 0
  2. Best Answer

    I leave you a possible example, with small modifications in your HTMLand CSS.

    I have positioned the box .animationat 100%, both that width heightof our parent box .item, since it has a fixed height of 656px.

    I have created a box called .centrado, in order to position the text in the center of the image, which in your code does not work.

    Example:

    .item {
  width: 100%;
  height: 656px !important;
  background-size: cover;
  background-position: 50% 0;
  background-repeat: no-repeat;
  position: relative !important;
}

.centrado {
  display: block;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: 11 !important;
}

.animation {
  display: block;
  position: absolute;
  height: 100%;      
  width: 100%;
  background-color: rgba(0, 0, 0, .75);
  z-index: 10 !important;
}  

.out-about {     
  text-align: center;
  margin: 0 auto;      
}

.out-about h1 {
  font-size: 35px;
  color:  #97D302;
  font-weight: 100;
}

.out-about h2 {
  font-size: 35px;
  padding-top: 30px;
  padding-bottom: 10px;
  color: #95a5a6;
  font-weight: 100;
}

.white { color:white; }

.LightGrey {
  color: #ccc;
}

.TanDark {
  color: #c59e6f;
}
      <div class="item" style="background-image: url('https://s3-us-west-2.amazonaws.com/devcode/img/fondo/fondo.jpg');">
    <div class="container">
      <div class="row">

        <div class="animation"><!-- capa oscura --></div>
        
        <div class="centrado">

          <div class="out-about slideInUp">
            <h3 class="TanDark">"Lorem ipsum dolor sit amet, ius minim gubergren ad."</h3>
          </div>

          <div class="out-about">
            <p class="LightGrey">Lorem ipsum dolor sit amet, vix erat audiam ei. Cum doctus civibus efficiantur in. Nec id tempor imperdiet deterruisset, doctus volumus explicari qui ex.</p>
          </div>

        </div>

      </div>
    </div>
  </div>

    • 0