CSS ile şeffaf görüntü oluşturmak kolaydır.
CSS opacity mülkiyet CSS3 önerisi bir parçasıdır.
Örnek 1 - Bir Saydam Resim Oluşturma
Şeffaflık CSS3 özelliktir opacity .
Öncelikle nasıl CSS ile şeffaf bir resim oluşturmak için size gösterecektir.
Düzenli resim:
şeffaflık ile aynı resim:
alfa (opaklık = 40) "> Aşağıdaki CSS bak:
opacity 1.0 - mal 0.0 arasında bir değer alabilir. daha düşük bir değere, daha şeffaf.
IE8 ve önceki kullanımı filter: alpha(opacity=x) . Daha düşük bir değer elemanı daha şeffaf kılan 100 - x, 0 arasında bir değer alabilir.
Örnek 2 - Görüntü Şeffaflık - Effect getirin
Görüntüler üzerinde Fare:
CSS şöyle görünür:
Örnek
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Kendin dene " İlk CSS bloğu 1. Ayrıca, bir kullanıcı görüntülerden birine üzerine geldiğinde ne olacağını eklemiş Örnek koda benzer. kullanıcı üzerine geldiğinde bu durumda biz görüntü şeffaf olmak DEĞİL istiyorum. Bunun için CSS opacity:1; .
Fare işaretçisi görüntüden uzaklaştığı zaman, görüntü yine şeffaf olacaktır.
Örnek 3 - Şeffaf Kutu Metin
Bu şeffaf bir kutu yerleştirilir bazı metindir.
kaynak kodu şöyle:
Örnek
<html>
<head>
<style>
div.background
{
background: url(/css/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>
Kendin dene " Önce bir oluşturmak <div> elemanı (class="background") bir arka plan resmiyle ve bir sınır. Sonra başka oluşturmak <div> (class="transbox") ilk iç <div> . <div class="transbox"> bir arka plan rengi ve kenarlığı - div şeffaftır. Şeffaf İçinde <div> , bir içindeki bazı metin eklemek <p> elemanı.