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>

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

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

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

<h2>CSS Dersleri</h2>

</div>

</body>

</html>

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

İlgili

Yorum

Yorum Yap X

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum

Yorum Yap X