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

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>

<!DOCTYPE html>

<html>

<head>

<style>

.img1 {

opacity: 0.1;

}

.img2 {

opacity: 0.5;

}

.img3 {

opacity: 0.9;

}

</style>

</head>

<body>

</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>

<!DOCTYPE html>

<html>

<head>

<style>

img:hover{

opacity: 0.5;

}

</style>

</head>

<body>

</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>

<!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>

<!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>

<!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>

<h1>www.yazilimbilisim.net</h1>

<h2>CSS Dersleri</h2>

</div>

</body>

</html>

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

İlgili

Yorum

CSS Dersleri – Yazılım Bilişim Programlama için bir cevap yazın X

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum

CSS Dersleri – Yazılım Bilişim Programlama için bir cevap yazın X