Непрозрачность фона HTML не влияет на передний план - PullRequest
Новая
       7

Непрозрачность фона HTML не влияет на передний план

0 голосов
/ 01 июня 2018

У меня есть изображение для моего фона с непрозрачностью на .4.У меня перед ним изображение, которое, кажется, имеет ту же непрозрачность.Что мне делать, чтобы непрозрачность переднего изображения была 1,0?

Вот jsfiddle.

http://jsfiddle.net/aaronmk2/6zjtgxdm/150/

Вот мой HTML 

<div>Hello World

<img src="http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg" alt="">
</div>

и мой CSS 

div{
    width : auto;
    height : 1000px;
    background-image : url("http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg");
    background-position:  65% 65%;
  background-repeat:   no-repeat;
  background-size:     cover;
  opacity: .4;
}

Ответы [ 2 ]

0 голосов
/ 01 июня 2018

Я нашел решение.Вам нужно поместить фоновое изображение в псевдоэлемент div::after, например: 

div{
    width : auto;
    height : 1000px;
}

div::after {
  content: "";
  background-image : url("http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg");
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1; 
  background-position:  65% 65%;
  background-repeat:   no-repeat;
  background-size:     cover;
}

Таким образом, элемент div не имеет прозрачной прозрачности, которая ранее применялась к его дочернему элементу.элемент, изображение.

Я обновил вашу скрипку

0 голосов
/ 01 июня 2018

Вы можете задать относительное положение div и использовать его ранее с тем же изображением и перед тем же значением непрозрачности.Вы можете проверить приведенный ниже код в jsfiddle. 

/* Here is the code Start */
div{
    width : auto;
    height : 1000px;
    position:relative;
}
div:before{
  content:" ";
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-image : url("http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg");
  background-position:  65% 65%;
  background-repeat:   no-repeat;
  background-size:     cover;
  opacity: 0.4;
}
/* Here is the code Start */
...