Background image opacity without affecting text

Question

I have a problem with my background image and text. I only want to apply the opacity to background image but mine, the text was affected.

HTML

<div class="content">
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
</div>

CSS

.content{
    background: url(../img/103_n.jpg) left top no-repeat, url(../img/103_n.jpg) right bottom no-repeat;
    opacity: 0.5;
}

.content .box p{
    opacity: 1;
}

Answer 1

Follow this link How can i change background image opacity without changing on div content?

.content {
  position: relative;
}

.content::after {
  content: "";
  background: url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg') left top no-repeat, url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg') right bottom no-repeat;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

<div class="content">
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
</div>