CSS • WEB

CSS Opaklık ve Saydamlık (Opacity & Transparency)

8 yıl önce
2 Yorum
yazan Recep

opacity Özelliği bir HTML öğesinin şeffaflık derecesini ayarlamanızı sağlar. 1.0 ile 0.0 arasında değer almaktadır. 0 değeri tamamen saydam bir görüntü verirken 1.0 değeri tamamen doygun olan kendi orjinal görüntüsünü vermektedir.

Örnek;

Aşağıdaki örneğimizde resimlere uygulanan farklı opacity değerlerinin etkilerini görmektesiniz.

<!DOCTYPE html>
<html>
<head>
<style>
    .img1 {
        opacity: 0.1;    
    }
    .img2 {
        opacity: 0.5;    
    }
    .img3 {
        opacity: 0.9;    
    }
</style>
</head>
<body>

<img class="img1" src="wp.jpg" width="170" height="100">
<img class="img2" src="wp.jpg" width="170" height="100">
<img class="img3" src="wp.jpg" width="170" height="100">

</body>
</html>

Örnek;

hover Sözde Sınıfını kullanarak bir resmin üzerine geldiğinizde saydamlık seviyesinin değişmesi güzel bir etki yaratabilir.

<!DOCTYPE html>
<html>
<head>
<style>
    img:hover{
        opacity: 0.5;
    }
</style>
</head>
<body>

<img class="img1" src="1.jpg" width="170" height="100">
<img class="img2" src="2.jpg" width="170" height="100">
<img class="img3" src="3.jpg" width="170" height="100">

</body>
</html>

Örnek;

Bir HTML öğesinin arka plan rengine (background-color) saydamlık uygulanabilir. Ancak böyle bir durumda tüm alt öğeler de bu saydamlık değerine sahip olacaktır. Aşağıdaki örneğimizde <div> öğesinin arka plan rengine saydamlık uygulandığını görebilirsiniz.

<!DOCTYPE html>
<html>
<head>
<style>
    div {
        background-color: green;
        padding: 10px;
    }

    div.kutu1{
        opacity: 0.1;    
    }

    div.kutu2{
        opacity: 0.3;    
    }

    div.kutu3{
        opacity: 0.6;    
    }
</style>
</head>
<body>

<div class="kutu1"><p>opacity 0.1</p></div>
<div class="kutu2"><p>opacity 0.3</p></div>
<div class="kutu3"><p>opacity 0.6</p></div>
<div><p>opacity 1</p></div>

</body>
</html>

Örnek;

opacity Özelliğini rgba türünden renk kodu vererek uygulayabilirsiniz.

<!DOCTYPE html>
<html>
<head>
<style>
    div {    
        background-color: rgba(255, 51, 0,1);
        padding: 10px;
    }

    div.kutu1 {
        background-color: rgba(255, 51, 0,0.1);
    }

    div.kutu2 {
        background-color: rgba(255, 51, 0,0.3); 
    }

    div.kutu3 {
        background-color: rgba(255, 51, 0,0.6);   
    }
</style>
</head>
<body>

<div class="kutu1"><p>opacity 0.1</p></div>
<div class="kutu2"><p>opacity 0.3</p></div>
<div class="kutu3"><p>opacity 0.6</p></div>
<div><p>opacity 1</p></div>

</body>
</html>

Örnek;

Bir resmin üzerine kutu yerleştirmek istediğinizde, onu belirli bir derecede saydam yapmak uygun bir yol olacaktır.

<!DOCTYPE html>
<html>
<head>
<style> 
    .kutu{
        position: relative; 
        color: white;
        width: 600px;
    }
    .bilgi{
        position: absolute;
        bottom: 20px;
        left: 10px;
        right: 0px;
        background-color: rgba(86, 101, 115,0.6);                
    }
</style>
</head>
<body>

    <div class="kutu">
        <img src="sapanca.jpg">
        <div class="bilgi">
            <h1>www.yazilimbilisim.net</h1>
            <h2>CSS Dersleri</h2>
        </div>
    </div>

</body>
</html>

İlginizi Çekebilir

Yorum

Yorum Yap