cssup-banner.jpg

實例1 - 創建透明圖像

定義透明效果的CSS3屬性是opacity。

首先，我們將展示如何通過CSS 來創建透明圖像。

常規圖像：

Peach Blossom

帶有透明度的相同圖像：

Peach Blossom

請看下面的CSS： 

img
{
opacity:0.4;
filter:alpha(opacity=40); <span class="code_comment">/*針對IE8以及更早的版本*/</span>
}

IE9, Firefox, Chrome, Opera和Safari使用屬性opacity來設定透明度。opacity屬性能夠設置的值從0.0到1.0。值越小，越透明。

IE8以及更早的版本使用濾鏡filter:alpha(opacity=x)。x能夠取的值從0到100。值越小，越透明。

實例2 - 圖像透明度- Hover 效果

請把鼠標指針移動到圖像上：

Peach Blossom

CSS 是這樣的： 

img
{
opacity:0.4;
filter:alpha(opacity=40); <span class="code_comment">/*針對IE8以及更早的版本*/</span>
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); <span class="code_comment">/*針對IE8以及更早的版本*/</span>
}

第一個CSS 代碼塊類似實例1 中的代碼。此外，我們已經設置了當鼠標指針位於圖像上時的樣式。在這個例子中，當指針移動到圖像上時，我們希望圖像是不透明的。

對應的CSS是：opacity=1。

IE8以及更早的瀏覽器：filter:alpha(opacity=100)。

當鼠標指針移出圖像後，圖像會再次透明。

實例3 - 透明框中的文本

This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.

源代碼是這樣的： 

<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
  width: 400px;
  height: 266px;
  background: url('/i/tulip_peach_blossom_w.jpg') no-repeat;
  border: 1px solid black;
}
div.transbox
{
  width: 338px;
  height: 204px;
  margin:30px;
  background-color: #ffffff;
  border: 1px solid black;
  <span class="code_comment">/* for IE */</span>
  filter:alpha(opacity=60);
  <span class="code_comment">/* CSS3 standard */</span>
  opacity:0.6;
}
div.transbox p
{
  margin: 30px 40px;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>

首先，我們創建一個div 元素(class="background")，它有固定的高度和寬度、背景圖像，以及邊框。然後我們在第一個div 內創建稍小的div (class="transbox")。"transbox" div 有固定的寬度、背景色和邊框- 並且它是透明的。在透明div 內部，我們在p 元素中加入了一些文本。

arrow
arrow
    文章標籤
    Code Design code 設計密碼 Design 線上學習 CSS
    全站熱搜

    設計密碼工作室 發表在 痞客邦 留言(0) 人氣()