css-opaklik-seffaflik

opacity Nitelik bir elemanın donukluk / şeffaflığı belirtir.

Şeffaf Görüntü

opacity1.0 - mal 0.0 arasında bir değer alabilir. Düşük değer, daha şeffaf:

Not: IE8 ve daha önceki sürümleri kullanın filter:alpha(opacity=x). X, 0 - 100 arasında bir değer alabilir. Daha düşük bir değer, elemanı daha şeffaf yapar.

img {

opacity: 0.5;

filter: alpha(opacity=50); /* For IE8 and earlier */

}



Şeffaf Hover Efekti

opacityTesis, genellikle birlikte kullanılır :hover Fare ile üzerine donukluk değiştirmek için selektör:

img {

opacity: 0.5;

filter: alpha(opacity=50); /* For IE8 and earlier */

}

img:hover {

opacity: 1.0;

filter: alpha(opacity=100); /* For IE8 and earlier */

}



Şeffaf Kutu

Bir opacityöğenin arka planına şeffaflık eklemek için mülkü kullanırken , tüm alt öğeleri aynı saydamlığı devralır. Bu, tam şeffaf bir öğenin içindeki metnin okunmasını zorlaştırabilir:

div {

opacity: 0.3;

filter: alpha(opacity=30); /* For IE8 and earlier */

}



Şeffaf Kutudaki Metin

< html>

< head>

< style>

div.background {

background: url(klematis.jpg) repeat;

border: 2px solid black;

}

div.transbox {

margin: 30px;

background-color: #ffffff;

border: 1px solid black;

opacity: 0.6;

filter: alpha(opacity=60); /* For IE8 and earlier */

}

div.transbox p {

margin: 5%;

font-weight: bold;

color: #000000;

}


< /style>

< /head>

< body>

< div class="background">

<div class="transbox">

<p>This is some text that is placed in the transparent box.</p>

</div>

< /div>

< /body>

< /html>