Как сделать чтобы при 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="", и описание условия?
