了解關於CSS3不透明度

使您的背景透明

您可以在打印設計中輕鬆完成的任務之一是在圖像或彩色背景上疊加文本，並更改該圖像的透明度以使文本淡入背景。 但CSS3中有一個屬性可以讓你改變元素的不透明度，使它們淡入淡出：不透明。

如何使用不透明屬性

不透明度屬性採用從0.0到1.0的透明度值。

0.0是100％透明的，任何低於該元素的東西都會完全顯示。 1.0是100％不透明 - 元素下面沒有任何東西會顯示。

因此，要將元素設置為50％透明，您可以編寫以下內容：

不透明度：0.5;

看到一些不透明的實例

一定要在舊瀏覽器中測試

IE 6和7都不支持CSS3不透明屬性。 但你並沒有失敗。 相反，IE支持僅Microsoft的屬性alpha濾鏡。 IE中的Alpha過濾器接受從0（完全透明）到100（完全不透明）的值。 因此，為了在IE中獲得透明度，您應該將不透明度乘以100，並為樣式添加alpha濾鏡：

過濾器：alpha（不透明度= 50）;

查看實際使用的alpha濾鏡（僅限IE）

並使用瀏覽器前綴

您應該使用-moz-和-webkit-前綴，以便老版本的Mozilla和Webkit瀏覽器也支持它：

-webkit-opacity：0.5;
-moz-opacity：0.5;
不透明度：0.5;

始終將瀏覽器前綴放在第一位，並將有效的CSS3屬性放在最後。

在舊版Mozilla和Webkit瀏覽器中測試瀏覽器前綴。

你可以使圖像透明

設置圖像本身的不透明度，它會淡入背景。 這對背景圖像非常有用。

如果你添加一個錨標籤，你可以通過改變圖像的不透明度來創建懸停效果 。

a：hover img {
過濾器：alpha（不透明度= 50）
filter：progid：DXImageTransform.Microsoft.Alpha（opacity = 50）
-moz-opacity：0.5;
-webkit-opacity：0.5;
不透明度：0.5;
}

影響這個HTML：

測試上述樣式和HTML。

在您的圖片上放置文字

使用不透明度，您可以將文字放在圖像上，並使圖像在文本所在的位置顯示淡出。

這種技術有點棘手，因為你不能簡單地淡入淡出圖像，因為這會褪色整個圖像。 而且你不能淡入文本框 ，因為文本也會淡入。

1. 首先你創建一個容器DIV並將你的圖像放在裡面：

   
   

2. 按照圖像與一個空的DIV - 這是你會變得透明。

   
   
   

3. 您在HTML中添加的最後一件事是帶有文本的DIV：

   
   
   
   這是我的狗沙斯塔。 他不可愛！

4. 您使用CSS定位進行設計，將文本放置在圖像上方。 我把文字放在左邊，但你可以通過改變左邊的兩個來放在右邊：0; 屬性向右：0; 。

   ＃圖片 {
   位置：相對;
   寬度：170像素;
   高度：128像素;
   餘量：0;
   }
   #text {
   位置：絕對的;
   頂部：0;
   左：0;
   寬度：60像素;
   高度：118px;
   背景：#FFF;
   填充：5像素;
   }
   #text {
   過濾器：alpha（不透明度= 70）;
   filter：progid：DXImageTransform.Microsoft.Alpha（opacity = 70）;
   -moz-opacity：0.70;
   不透明度：0.7;
   }
   #words {
   位置：絕對的;
   頂部：0;
   左：0;
   寬度：60像素;
   高度：118px;
   背景：透明;
   填充：5像素;
   }

看看它看起來如何