HTML ve CSS kullanarak arka plan görseli (background-image) olan bir div'de opaklık ayarı (opacity) yapabilme imkanı doğrudan bulunmuyor. Bunun yerine iç içe div'ler tasarlamak bir seçenek olabileceği gibi HTML sayfasını hiç bozmadan doğrudan CSS içinde div yerine div:before özelliği için aşağıdaki örnekteki gibi background-image özelliğini kullanabilirsiniz.
Bu kullanımda opacity değerini azaltmak ve arka plan görselini istediğiniz gibi konumlandırmak mümkündür.
HTML:
<div class="container">
<div class="row">
<div class="arkaplan"></div>
</div>
</div>
CSS:
.arkaplan {
position: relative;
background: #5C97FF;
overflow: hidden;
min-height: 200px;
}
.arkaplan:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
background-image: url('https://images.freeimages.com/images/large-previews/c5a/chapada-1-1361193.jpg');
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
Editör editi: Sitedeki bazı diğer benzer yazılar için;
bkz: CSS ile bir input'a (textbox) nasıl yazılması engellenir?
bkz: CSS ile Display Flex içinde ortalama yapmak
bkz: CSS ile HTML'de Yazıların Rengini Değiştirmek (CSS Color)
bkz: HTML ve CSS ile kayan yazı yapmak
bkz: Html ve Css ile bütün internet sitesini siyah beyaz yapmak
bkz: Angular Component'ine css eklemek