CSS背景透明度。 使用CSS透明背景或文字

隨著CSS3的出現，佈局設計人員的工作在許多方面變得更加簡單和更合乎邏輯：畢竟，現在，您可以真正靈活地配置一個對象，所有這些都更少使用JavaScript。 假設您需要調整背景透明度 - CSS立即提供幾個選項。

背景由一組屬性 （background-image，background-position，background-size，background-repeat，background-attachment，background-origin，background-clip，background-color）設置， 每個屬性可以在屬性下單獨寫入或組合背景。 讓我們更詳細的分析每一個。

背景顏色屬性

在CSS中，您可以通過以下幾種方式指定 背景顏色 ：使用十六進制代碼，顏色名稱或RGB記錄。 在CSS3中，可以使用RGBA選項而不是RGB記錄。

十六進制顏色代碼寫入網格後面的屬性：background-color：＃FFDAB9。 如果同一條目中的字符成對匹配，則代碼通常會稍微縮短：＃ccff00可以寫為＃cf0：

身體{background-color：＃cf0;}。

這個名字甚至是最異國情調的鮮花。 例如，除了標準的紅色和白色，您可以使用NavajoWhite（#FFDEAD）或Honeydew2（＃E0EEE0）：

身體{background-color：purple;}。

RGB或RGBA記錄的最後一個版本允許您不僅指定顏色，還可以指定CSS背景的透明度，但該方法僅適用於IE 9以上版本。 其他瀏覽器通常會識別透明度的選項。 按照W3C標準，最好使用RGBA代替較常用的RGB。

RGBA的最後一個值，並將背景的不透明度從0（透明）設置為1（不透明）。

有一些更不尋常的含義。 背景顏色可以用HSL和HSLA設置。 兩者都添加到CSS3，因此IE不支持在版本9之下。 選項與RGB或RGBA相同，僅以不同的格式：色相（色調是色輪上的值，以度為單位），飽和度（亮度是顏色的百分比，以百分比為單位，從0到100），亮度（亮度是亮度，以與參數飽和度相同的方式測量） ）。

背景圖像屬性

透明背景的跨瀏覽器版本是圖像的使用。 在CSS3中，您可以指定幾個圖像，這是通過逗號完成的。 例如：

正文 {background-image： url（bg1.png），url（bg2.png）}。

這種方法甚至支持IE8。 作為背景的幾張圖像用於橡膠拼版。 主要的是，不要忘了，當使用任何圖像時，也可以在CSS中設置背景顏色，因為用戶根本無法加載圖片。

background-position屬性

如果您使用圖像來指定塊的背景，CSS將允許您將圖像放置在屏幕上的任何位置。 默認情況下，圖像位於左上角。 該屬性採用語言指令（頂部，底部，左側，右側）或數字（百分比，像素和其他度量單位）。 在這種情況下，您必須指定兩個值：水平和垂直：

身體{background-position：right center;} - 在這個例子中，背景將在頁面的右側，與圖像的距離的底部和頂部相同。

background-size屬性

有時你想使用CSS拉伸背景或減小其大小。 為此，請使用background-size屬性，並且可以以像素或百分比以及任何其他度量單位指定背景大小。

使用這個屬性有一些問題：為了在早期版本的瀏覽器中正確顯示背景，需要使用前綴。 當然，當前版本完全支持這個屬性，特定屬性的需求已經消失了。

background-attachment屬性

此屬性指定滾動時背景圖像的行為。 所以，它可以取3個值（不考慮本文中提到的所有屬性的共同繼承）：

• 固定 - 在固定的背景上製作照片;
• 滾動 - 背景與其餘元素一起滾動;
• 本地 - 如果滾動條有內容，背景圖像會滾動。 超出內容的背景是固定的。

使用示例：

身體{background-attachment fixed}。

目前，Firefox不支持最後一個屬性（本地）。

背景來源屬性

該屬性負責定位元素。 早期版本的瀏覽器需要使用前綴。 屬性本身有三個參數：

• 填充框相對於邊緣定位背景，考慮到框架的厚度;
• 邊框與以前的屬性不同，因為邊界線可以完全或部分地覆蓋背景;
• 內容框定位圖像，將其旋轉到內容。

如果指定了幾個值，那麼瀏覽器可以以自己的方式做出反應：Firefox和Opera只會看到第一個選項。

背景重複屬性

通常，如果背景由圖像指定，則必須水平或垂直重複。 為此，使用background-repeat屬性。 所以，CSS包含這樣一個屬性的塊的背景可以有幾個參數之一：

• 不重複 - 圖像在單個變體中出現在頁面上;
• 重複 - 沿x和y軸重複背景;
• Repeat-x - 僅水平;
• 重複y - 垂直;
• 空間 - 背景重複，但如果空間不填，圖像之間會出現圖像;
• 回合 - 如果您無法使整個區域充滿整個圖片，圖像將縮放。

使用屬性的示例：

身體{background-repeat：no-repeat repeat} - 類似於background-repeat：repeat-y。

在CSS3中，如果使用逗號列出參數，則可以為多個圖像指定值。

background-clip屬性

此屬性定義邊界下的背景行為（例如，在虛線框的情況下）：

• 填充框 - 背景嚴格在塊內顯示;
• 邊框 - 圖像在框架下;
• 內容框 - 背景上的圖片僅顯示在內容中。

使用示例：

正文{background-clip：content-box;}。

Chrom和Safari需要使用-webkit-前綴。

不透明度和過濾器屬性

透明度屬性允許您設置背景的透明度 - CSS屬性將適用於所有瀏覽器。 該值設置為0.0到1.0（含）。 在這樣做時，您可以設置CSS的背景透明度 沒有整數值：而不是0.3，只要寫入.3：

.block {background-image：url（img.png）; 不透明度：.3;}。

要設置背景的透明度，其CSS適用於第九版以下的IE，請使用filter屬性：

.block {background-image：url（img.png）; 過濾器：alpha（opacity = 30）;}。

在這種情況下，不透明度值設置為0到100.請注意，不透明度屬性與使用RGBA繼承的透明度設置不同：使用不透明度時，不僅背景變得透明，而且塊內的所有元素也是透明的。

始終遵循獨聯體和所有其他國家使用瀏覽器的統計資料。 所有佈局製造商的最大問題是舊版本的IE，它們不允許您最充分地使用CSS3。 在進行佈局時，不要忘記使用特殊服務來檢查瀏覽器是否支持任何CSS屬性。 如果您無法安裝較舊版本的瀏覽器，請查找一種將在線檢測不同瀏覽器中網站操作的服務。