Почему градиент не применяется к img?

Question

[Norwood]

Обычно, я делал через background и всё нормально работало:

//background: linear-gradient(360deg, rgba(252, 95, 69, .49), transparent), center/ cover no-repeat url("/assets/img/about-us/about-us.jpg");

Но именно к тегу img почему-то не применяется. А это слайдер и через background делать это не правильно, на мой взгляд. Можете подсказать что я не так делаю?

<div class="slider__item">
        <img class="slider__img" src="" data-lazy="/assets/img/slider/img1.jpg" alt="">
          <div class="text red-border">Deployment ownership non-disclosure agreement vesting period crowdfunding
            success influencer partnership equity series A financing network effects user
            experience crowdsource. Burn rate stock bootstrapping direct mailing release client traction creative
            facebook monetization crowdfunding rockstar.
            <p class="slider__text-cursive">Melina</p>
            <p class="slider__text-name">Melina Albrecht</p>
            <p class="slider__text-position color-red">Founder, TingTong</p>
          </div>
      </div>

.slider__img {
  box-shadow: .5px .86px 20px 0 rgba(0, 0, 0, 0.5);
  border: 10px solid rgba(0, 0, 0, .2);
  box-sizing: border-box;
  position: relative;
  &:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(360deg, rgba(252, 95, 69, .49), transparent);
  }
}

Comments

[Ankhena]

Обычно я делал через background и всё нормально работало:

И сейчас будет нормально работать, если нормально напишете и запятую поставите где надо.

А на счет тега img: он одиночный, у него нет псевдоэлементов.

[Norwood]

Ankhena, через background всё ок, вопросов нету. Получается я background должен применить к img? Ведь в слайдере нельзя без img?

[Ankhena]

Norwood,

Ведь в слайдере нельзя без img?

Кто такое сказал?

Является ли картинка контентной или украшением определяется вовсе не наличием слайдера.

Если это контентная картинка, то это img. Если это украшение слайда, то это фон, псевдоэлемент или img с aria-hidden true.

Получается я background должен применить к img?

Если img это непрозрачный jpg, то от наличия фона ему ни жарко ни холодно. Ну кроме лишних байтиков.

Как лучше решать конкретно вашу задачу можно сказать только глядя в макет.

[Norwood]

Ankhena, вот такой макет

я сделал так (вроде как всё работает), но думаю есть более правильный вариант

<div class="slider__item">
        <div class="slider__img bgr-red">
          <img src="" data-lazy="/assets/img/slider/img1.jpg" alt="photo Michael">
        </div>
        <div class="text red-border">Deployment ownership non-disclosure agreement vesting period crowdfunding
          success influencer partnership equity series A financing network effects user
          experience crowdsource. Burn rate stock bootstrapping direct mailing release client traction creative
          facebook monetization crowdfunding rockstar.
          <p class="slider__text-cursive">Michael</p>
          <p class="slider__text-name">Michael Schmitt</p>
          <p class="slider__text-position color-red">Founder, TingTong</p>
        </div>
      </div>

.slider__img, .bgr-red {
    border: 10px solid rgba(0, 0, 0, .2);
    box-sizing: border-box;
    width: 384px;
    height: 399px;
    position: relative;

    &:after {
      content: "";
      box-shadow: .5px .86px 20px 0 rgba(0, 0, 0, 0.5);
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
  }

[Ankhena]

Norwood, да, тогда, контентная.

но думаю есть более правильный вариант

Да, слегка.
Тег для оборачивания картинки это <figure>.

.slider__img, .bgr-red

Зачем два раза-то? Одного достаточно.

Ну и названия классов, конечно.
Если в другом дизайне этот текст slider__text-cursive перестанет быть курсивным, будете и стили переписывать и классы менять? slider__signature будет разумнее. И понятно о чем речь и стили любые можно применить.

[Norwood]

Ankhena, огромное спасибо! Всё понял, переделаю!

[Модератор]

Запрещено код размещать скриншотами! П.3.8 правил.

Answer 1

[kryamk]

Попробуйте загуглить: img и псевдоэлементы

Comments

[Norwood]

:before и :after добавляет контент к содержимому элемента, а у img же как такового содержимого нет.