今日HTML小知識-2：設置顏色透明

頭條創(chuàng)作挑戰(zhàn)賽#

【今日HTML小知識-2：設置顏色透明】在網(wǎng)頁布局中有時為了網(wǎng)頁的整體美觀，可能需要將網(wǎng)頁中的某些部分設置為背景顏色透明，那么如何設置背景顏色透明呢？本篇文章就來給大家介紹一下設置背景顏色透明的兩種方法。

1、通過backgroud和opacity設置背景顏色透明

background屬性中屬性值比較簡單，這里就不細說了，opacity屬性參數(shù)的＂不透明度＂是以數(shù)字表示，從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是1.0，換句話說，數(shù)字越大代表元素越不透明。代碼示例如下：

代碼

示例效果

注意：通過backgroud和opacity設置背景顏色透明度，如果背景上面有文字的話，那么文字也會變成透明，就像上面的效果一樣。

2、通過rgba方式設置背景顏色透明

所謂RGBA顏色，就是RGB三原色加ALPHA。在給背景添加顏色的同時，提供透明度特性。

用法：background:rgba(R, G, B, A) ；

代碼實例如下：

代碼

示例效果

注意：通過rgba方式設置背景顏色透明度，可以設置背景顏色透明而文字不透明。

以上為HTML設置背景透明色的兩種方法，希望能幫助到正在學習HTML的你們噢~~~

新人作者，如有不足地方，希望大家多多交流，隨時補充噢~~~

言

通常，我們?yōu)閐iv盒子或者圖片設置陰影使用 box-shadow 屬性，代碼如下：

box-shadow: 10px 10px 10px gray;

問題拋出

使用 box-shadow 屬性給div盒子設置陰影倒還好，如果用在透明的圖片上，陰影會變成方形的，讓其看起來像添加了一個邊框一樣。

解決方法

我們可以通過css的另一種參數(shù)，為透明png實現(xiàn)基于透明圖片的陰影效果，效果如下圖，左側(cè)是 box-shadow ，右側(cè) drop-shadow 。

drop-shadow()說明：

drop-shadow() 是CSS中用于為圖像或文本添加陰影效果的一個函數(shù)，?它屬于 filter 屬性的一部分。?這個函數(shù)允許你為元素創(chuàng)建陰影，?而不需要考慮元素的形狀或邊界框。?與 box-shadow 不同，?drop-shadow 可以應用于非矩形形狀，?如透明的PNG或SVG圖像，?它使用元素的Alpha蒙版來決定陰影的形狀。?這意味著，?即使元素沒有背景，drop-shadow 也能為圖像的非透明部分創(chuàng)建陰影。?

drop-shadow()語法如下：

filter: drop-shadow( offset-x offset-y blur-radius spread-radius color )

drop-shadow()參數(shù)說明如下：

offset-x：該參數(shù)設置圖像的水平偏移量。正值創(chuàng)建右側(cè)偏移，負值創(chuàng)建左側(cè)偏移。
offset-y：此參數(shù)設置圖像的垂直偏移量。正值創(chuàng)建到底部的偏移量，負值創(chuàng)建到頂部的偏移量。
blur-radius：設置模糊半徑的值。它是一個可選參數(shù)。
spread-radius：設置傳播半徑的值。它是一個可選參數(shù)。
color：設置投影的顏色。它的可選參數(shù)。

演示代碼如下：

<!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>

總結(jié)

盡管有很好的支持，但 drop-shadow 濾鏡仍然沒有得到充分的利用。我希望這篇文章強調(diào)了一些使用 box-shadow的情況，也許你可以在你的下一個項目中使用它！

目中經(jīng)常會用到背景圖上放一些文字介紹，今天主要介紹如何實現(xiàn)背景圖片透明，文字不透明效果，感興趣的小伙伴可以一起研究！

作法一：背景圖片+偽類+flite:blur(3px)

效果圖：

作法二：半透明效果：背景圖片+定位+background：rgba(255,255,255,0.3)

在線咨詢

上一篇：FreeMarker基本語法
下一篇：CSS z-index 屬性

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商