Home / Questions / 29189
Accepted
Otto
Asked: 2020-10-22 07:41:51 +0800 CST 2020-10-22 07:41:51 +0800 CST

Как применить прозрачный темный слой к фоновому изображению?

  • 772

Я пытаюсь применить прозрачный черный цвет к фоновому изображению, чтобы избежать ярких или ярких цветов.

Нет необходимости редактировать изображение в какой-либо специальной программе.

Я попытался применить этот стиль:

background-color: rgba(0,0,0,0.8);

Но я не добился успеха.

Как заставить фоновое изображение применять прозрачный черный цвет, как слой.

#image {
  background-color: rgba(0,0,0,0.8);
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
}
<div id="image"></div>

html5

5 Answers

  1. Best Answer

    Одной из возможностей было бы использование фильтров CSS для изменения контраста/яркости изображения. Если вы установите яркость от 0 до 1, изображение будет выглядеть темнее. Что-то вроде этого примера:

    #image {
  background-color: rgba(0,0,0,0.8);
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  filter:brightness(0.4);
}
    <div id="image"></div>

    Другим вариантом может быть использование псевдоэлементов ::beforeo , ::afterчтобы поместить полупрозрачный слой поверх изображения и тем самым сделать его темнее. Например:

    #image {
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  position:relative;
  color: white;
  z-index:1;
}

#image::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  z-index:-1;
}
    <div id="image">
  HOLA MUNDO
</div>

    • 14

  2. Вы можете работать с фильтром

    #image {
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
    <div id="image"></div>

    • 3

  3. Вы получаете это с линейным градиентом в фоновом изображении:

    #image {

  background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
}

    Если вы не совсем понимаете это, вы можете следовать этому короткому руководству на YouTube:

    https://www.youtube.com/watch?v=ASgmfNvCQRg

    • 3

  4. Вы можете применить что-то похожее на это:

    <style>
img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
</style>

<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>

<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">

    источник: http://www.w3schools.com/css/tryit.asp?filename=trycss_image_opacity

    • 2

  5. Все представленные коды используются для рассматриваемого предмета, к сожалению это влияет не только на фоновое изображение, но и на шрифты.

    В моем случае я предпочитаю редактировать фото :/ это больше работы, но надежнее.

    • 1