Непрозрачный текст с html-изображением и классами psuedo css

Question

Мне нужно разместить непрозрачный текст на изображении. Это изображение определено в HTML. (Это так может быть динамично). Я создаю прозрачность с помощью псевдоэлемента :after. Я хотел бы иметь текст на этом изображении. оценен

Однако проблема, с которой я сталкиваюсь, заключается в том, что текст наследует прозрачность. Все остальные решения, которые я нашел, определяют изображение в CSS или вообще не используют изображение. Спасибо за любую помощь, спасибо!

РЕДАКТИРОВАТЬ: Цветная прозрачность желательна.

<div class="col-md-6" id="red-square-parent">
  <%= image_tag 'infos/home/teaching-3.jpg' %>
  <div class="centered">Don't Apply Transparency to me!</div>
</div>

#red-square-parent img{
  height: 100%;
  width: 100%;
  object-fit: none;
}

// Overlay
#red-square-parent:after{
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba($comp-color-red, 0.7);
}

Answer 1

Итак, проблема в том, что вы применяете прозрачность к родительскому элементу. Просто наведите на изображение специально для прозрачности:

JSFiddle

#red-square-parent img{
  position: relative;
  opacity: 0.5;
}

#red-square-parent div{
  position: absolute;
  bottom: 40px;
  color: black;
  font-size: 50px;
}

<div class="col-md-6" id="red-square-parent">
  <img src="http://i.imgur.com/eTmzQ.jpg"/>
  <div class="centered">Don't Apply Transparency to me!</div>
</div>

Чтобы применить цветной фильтр к этому изображению, вы не будете применять background-color, поскольку это не изменит цвет изображения вообще.

То, что вам вместо этого нужно сделать, немного сложнее, но вы должны применить filter к изображению.

Я бы рекомендовал использовать такой инструмент, как этот: Генератор CSS - Фильтр , чтобы получить желаемый цветовой эффект, который вы хотите.

Когда у вас есть требуемый filter, обновите ваш код, чтобы он выглядел примерно так (используя код, сгенерированный с сайта CSS Generator - Filter . См. Мой JSFiddle

#red-square-parent img{
  position: relative;
  opacity: 0.5;
  
  /* Filter  */
  filter: grayscale(50%) opacity(1) brightness(100%) contrast(100%) hue-rotate(500deg);
-webkit-filter: grayscale(50%) opacity(1) brightness(100%) contrast(100%) hue-rotate(500deg);
}

#red-square-parent div{
  position: absolute;
  bottom: 40px;
  color: black;
  font-size: 50px;
}

<div class="col-md-6" id="red-square-parent">
  <img src="http://i.imgur.com/eTmzQ.jpg"/>
  <div class="centered">Don't Apply Transparency to me!</div>
</div>