5.00 / 1 oy

CSS ile background-image opacity nasıl ayarlanır?

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

koroglu

27.04.2021 18:37

Bu soru henüz yanıtlanmamış.

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
CSS ile background-image opacity nasıl ayarlanır?

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.