Как затемнить изображение .main-news__img только средствами css?

Question

Ещё одно img поверх + opacity добавлять нельзя, а свойство box-shadow почему-то не работает. Как затемнить .main-news__img?

https://jsfiddle.net/Ls1mp26t/

<article class="main-news">
  <img class="main-news__img" src="images/crimea.jpg" alt="Замок Ласточкино Гнездо в Крыму">
  <img class="main__darkened" src="images/darkened.jpg" alt="черный фон">
    <div class="main-news__info">
      <div class="main-news__props">
        <a class="main-news__props__link" href="#">/ Политика</a>
      </div>

      <h3 class="main-news__text">
        <a class="main-news__link" href="#">В Крыму отреагировали на слова Кравчука о возврате полуострова</a>
      </h3> 

      <div class="main-news__props">
        <time class="main-news__date" datetime="2018-06-19 10:48">19 июня 2018 
            <span class="main-news__time">10:48</span>
        </time>
      </div>
    </div>
</article>

.main-news {
    position: relative;

    color: #ffffff;

    min-width: 463px;
    min-height: 324px;

    margin: 0 0 13px 0;

    z-index: 1;
}
.main-news__img {
    position: absolute;

    width: 463px;
    height: 324px;

    z-index: -10;
}
.main__darkened {
    position: absolute;

    width: 463px;
    height: 324px;

    opacity: 30%;
    z-index: -5;
}
.main-news__info {
    font-size: 11px;

    padding: 114px 0 0 19px;
}
.main-news__props__link {
    padding: 0 0 0 3px;
}
.main-news__text {
    font-weight: bold;
    font-size: 29px;

    text-align: left;

    margin: 20px 0 23px 0;
}
.main-news__date {
    display: inline-block;

    font-size: 12px;

    padding: 0 0 0 3px;
}
.main-news__time {
    display: inline-block;

    background: url("../images/watch-icon.png") left;
    background-repeat: no-repeat;
    background-size: 10px;

    padding: 0 0 0 15px;
    margin: 0 0 0 15px;
}

Заранее спасибо.

Answer 1

Как вариант:

.main-news {
    position: relative;

    color: #ffffff;
    min-width: 463px;
    min-height: 324px;

    margin: 0 0 13px 0;

    z-index: 1;
}
.main-news__img {

    background: linear-gradient( rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.5) ), url('data:image/png;base64,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') no-repeat;
    position: absolute;

    width: 463px;
    height: 324px;

    z-index: -10;
}
.main__darkened {
    position: absolute;

    width: 463px;
    height: 324px;

    opacity: 30%;
    z-index: -5;
}
.main-news__info {
    font-size: 11px;

    padding: 114px 0 0 19px;
}
.main-news__props__link {
    padding: 0 0 0 3px;
}
.main-news__text {
    font-weight: bold;
    font-size: 29px;

    text-align: left;

    margin: 20px 0 23px 0;
}
.main-news__date {
    display: inline-block;

    font-size: 12px;

    padding: 0 0 0 3px;
}
.main-news__time {
    display: inline-block;

    background: url("../images/watch-icon.png") left;
    background-repeat: no-repeat;
    background-size: 10px;

    padding: 0 0 0 15px;
    margin: 0 0 0 15px;
}

<article class="main-news">
    <img class="main-news__img" src="" alt="Замок Ласточкино Гнездо в Крыму">
    <img class="main__darkened" src="images/darkened.jpg" alt="черный фон">
    <div class="main-news__info">
        <div class="main-news__props">
            <a class="main-news__props__link" href="#">/ Политика</a>
        </div>

        <h3 class="main-news__text">
            <a class="main-news__link" href="#">В Крыму отреагировали на слова Кравчука о возврате полуострова</a>
        </h3>

        <div class="main-news__props">
            <time class="main-news__date" datetime="2018-06-19 10:48">19 июня 2018
                <span class="main-news__time">10:48</span>
            </time>
        </div>
    </div>
</article>

Answer 2

Вот как раз css filter для этого нужны

.main-news {
  position: relative;
  color: #ffffff;
  min-width: 463px;
  min-height: 324px;
  margin: 0 0 13px 0;
  z-index: 1;
}

.main-news__img {
  position: absolute;
  width: 463px;
  height: 324px;
  z-index: -10;
  filter: brightness(30%);
}

.main__darkened {
  position: absolute;
  width: 463px;
  height: 324px;
  opacity: 30%;
  z-index: -5;
}

.main-news__info {
  font-size: 11px;
  padding: 114px 0 0 19px;
}

.main-news__props__link {
  padding: 0 0 0 3px;
}

.main-news__text {
  font-weight: bold;
  font-size: 29px;
  text-align: left;
  margin: 20px 0 23px 0;
}

.main-news__date {
  display: inline-block;
  font-size: 12px;
  padding: 0 0 0 3px;
}

.main-news__time {
  display: inline-block;
  background: url("../images/watch-icon.png") left;
  background-repeat: no-repeat;
  background-size: 10px;
  padding: 0 0 0 15px;
  margin: 0 0 0 15px;
}

<article class="main-news">

  <img class="main-news__img" src="https://photoclub.by/images/main40/407627_main.jpg" alt="Замок Ласточкино Гнездо в Крыму">

  <img class="main__darkened" src="images/darkened.jpg" alt="черный фон">

  <div class="main-news__info">
    <div class="main-news__props">
      <a class="main-news__props__link" href="#">/ Политика</a>
    </div>

    <h3 class="main-news__text">
      <a class="main-news__link" href="#">В Крыму отреагировали на слова Кравчука о возврате полуострова</a>
    </h3>

    <div class="main-news__props">
      <time class="main-news__date" datetime="2018-06-19 10:48">19 июня 2018 
										<span class="main-news__time">10:48</span>
									</time>
    </div>
  </div>
</article>

БЛОГ НА HUSL

Как затемнить изображение .main-news__img только средствами css?

Ответы (2 шт):