@AleksKc

Как сделать чтобы при opacity непроразрачность накладывалась только на изображение?

Как сделать чтобы при opacity в CSS непроразрачность накладывалась только на изображение, а текст оставался такого же цвета?
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        .ptr{
			display:inline-block;
			position:relative;
			opacity: 0.3;
		}
		.ptr span[type="Top and Left"] {
			display:inline-block;
			position:absolute;
			top:0px;
			left:0px;
			color: white;
			font-size:20px;
		}
		.ptr span[type="Top and Right"] {
			display:inline-block;
			position:absolute;
			top:0px;
			right:0px;
			color: white;
			font-size:20px;
		}
		.ptr span[type="Bottom and Left"] {
			display:inline-block;
			position:absolute;
			bottom:0px;
			left:0px;
			color: white;
			font-size:20px;
		}
		.ptr span[type="Bottom and Right"] {
			display:inline-block;
			position:absolute;
			bottom:0px;
			right:0px;
			color: white;
			font-size:20px;
		}
		.ptr span[type="Center"] {
			display:inline-block;
			position:absolute;
			left: 0; 
			bottom: 50%; 
			right: 0;
			text-align: center;
			color: white;
			font-size:20px;
		}
	</style>
</head>

<body>
    <div class="ptr">
        <img src="nature.jpg" , width="600" , height="600">
        <span type="Top and Left">Top and Left</span>
        <span type="Top and Right">Top and Right</span>
        <span type="Bottom and Left">Bottom and Left</span>
        <span type="Bottom and Right">Bottom and Right</span>
        <span type="Center">Center</span>
    </div>
</body>

</html>

И можно как-то объединить блоки чтобы оптимизировать и уменьшить данный код?
т.е.
.ptr span {
      display:inline-block;
      position:absolute;
      color: black;
      font-size:20px;

И дальше идет выбор type="", и описание условия?
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
@MiMitin
Убери прозрачность из .ptr и добавь это:
.ptr img {opacity: 0.3;}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы