2

Скриншот сайта

Как сделать затемнённое изображение как на фото?

1
  • сделайте слой поверх изображения и задайте ему нужный цвет и прозрачность
    – Alpha
    29 апр 2018 в 16:55

2 ответа 2

2

Это делается на html и css. В css главное для картинки это position:absolute;

Absolute указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента.

#outer-box {
  width: 300px;
  height: 194px;
  display: block;
  position: relative;
}

#outer-box img {
  width: 300px;
  height: auto;
}

#outer-box #inner-box {
  background: #FD8698;
  height: 100%;
  width: 100%;
  opacity: 0;
  top: 0;
  left: 0;
  position: absolute;
  padding: 0;
  transition: opacity .5s;
}

#outer-box #inner-box p {
  color: #fff;
  line-height: 150px;
  font-family: 'arial';
  text-align: center;
}

#outer-box:hover #inner-box {
  opacity: .9;
  transition: opacity .5s;
}
<div id="outer-box">
  <img src="https://img.fonwall.ru/o/5y/eiffel-tower-paris-france-eyfeleva-bashnya-7n74.jpg" />
  <div id="inner-box">
    <p>Почему именно мы?</p>
  </div>
</div>

Это называется overlay

1
0

С помощью CSS. Подложите под изображение чёрный фон и уменьшайте прозрачность изображения с помощью, к примеру, opacirity: 0.9.

3
  • 1
    а как подложить фон под изображение? 29 апр 2018 в 17:00
  • Для div изображения сделайте CSS background: #000. 29 апр 2018 в 17:02
  • Свойства opacirity не существет ))
    – user245150
    29 апр 2018 в 18:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.