整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
頭條創作挑戰賽#
【今日HTML小知識-2：設置顏色透明】在網頁布局中有時為了網頁的整體美觀，可能需要將網頁中的某些部分設置為背景顏色透明，那么如何設置背景顏色透明呢？本篇文章就來給大家介紹一下設置背景顏色透明的兩種方法。
background屬性中屬性值比較簡單，這里就不細說了，opacity屬性參數的＂不透明度＂是以數字表示，從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是1.0，換句話說，數字越大代表元素越不透明。代碼示例如下：
代碼
示例效果
注意：通過backgroud和opacity設置背景顏色透明度，如果背景上面有文字的話，那么文字也會變成透明，就像上面的效果一樣。
所謂RGBA顏色，就是RGB三原色加ALPHA。在給背景添加顏色的同時，提供透明度特性。
用法：background:rgba(R, G, B, A) ；
代碼實例如下：
代碼
示例效果
注意：通過rgba方式設置背景顏色透明度，可以設置背景顏色透明而文字不透明。
以上為HTML設置背景透明色的兩種方法，希望能幫助到正在學習HTML的你們噢~~~
新人作者，如有不足地方，希望大家多多交流，隨時補充噢~~~
通常，我們為div盒子或者圖片設置陰影使用 box-shadow 屬性，代碼如下：
box-shadow: 10px 10px 10px gray;使用 box-shadow 屬性 給div盒子設置陰影倒還好，如果用在透明的圖片上，陰影會變成方形的，讓其看起來像添加了一個邊框一樣。
我們可以通過css的另一種參數，為透明png實現基于透明圖片的陰影效果，效果如下圖，左側是 box-shadow ，右側 drop-shadow 。
drop-shadow()說明：
drop-shadow() 是CSS中用于為圖像或文本添加陰影效果的一個函數，?它屬于 filter 屬性的一部分。?這個函數允許你為元素創建陰影，?而不需要考慮元素的形狀或邊界框。?與 box-shadow 不同，?drop-shadow 可以應用于非矩形形狀，?如透明的PNG或SVG圖像，?它使用元素的Alpha蒙版來決定陰影的形狀。?這意味著，?即使元素沒有背景，drop-shadow 也能為圖像的非透明部分創建陰影。?
drop-shadow()語法如下：
filter: drop-shadow( offset-x offset-y blur-radius spread-radius color )drop-shadow()參數說明如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.img_box .left_img{
box-shadow: 10px 10px 10px gray;
}
.img_box .right_img{
filter: drop-shadow(2px 4px 8px rgb(225, 170, 170));
}
</style>
</head>
<body>
<div class="img_box">
<img class="left_img" src="./lihua.png" />
<img class="right_img" src="./lihua.png" />
</div>
</body>
</html>盡管有很好的支持，但 drop-shadow 濾鏡仍然沒有得到充分的利用。我希望這篇文章強調了一些使用 box-shadow的 情況，也許你可以在你的下一個項目中使用它！
目中經常會用到背景圖上放一些文字介紹，今天主要介紹如何實現背景圖片透明，文字不透明效果，感興趣的小伙伴可以一起研究！
作法一：背景圖片+偽類+flite:blur(3px)
效果圖：
作法二：半透明效果：背景圖片+定位+background：rgba(255,255,255,0.3)
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
