深入了解opacity和rgba

2022-05-05 11:27:09 字數 1283 閱讀 8085

1. rgba

首先它是乙個屬性值,語法為rgba(r,g,b,a)

- r為紅色值, 正整數 | 百分數

- g為綠色值,正整數 | 百分數

- b為藍色值,正整數 | 百分數

- a為alpha(透明度),值為0 ~ 1之間的小數, 0.0 (完全透明)到 1.0(完全不透明)

- 上面的正整數為十進位制0 ~ 255之間的任意值,百分數為0% ~ 100%之間的任意值

2. opacity

opacity是乙個屬性,並非是屬性值。

使用方法為:opacity:0~1;

倆者之間最大的區別在於:opacity屬性的值,可以被其子元素繼承。而rgba後代元素不會繼承不透明屬性。

1

doctype html

>

2<

html

lang

="en"

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>opacity和rgba

title

>

6<

style

>

7.opacity

8.rgba

9style

>

10head

>

11<

body

>

12<

div

class

="opacity"

>

13<

p>hello world1

p>

14div

>

15<

div

class

="rgba"

>

16<

p>hello world2

p>

17div

>

18body

>

19html

>

輸出結果:不難看出,rgba的p元素文字內容沒有被設定為透明

當我們需要製作透明的邊框時 ,就使用ragb顏色,當我們需要背景透明時,需要使用alpha屬性,當然,背景上的內容的透明度也會隨之改變。

深入了解A

一 前言 在這裡我將對a 演算法的實際應用進行一定的 並且舉乙個有關a 演算法在最短路徑搜尋的例子。值得注意的是這裡並不對a 的基本的概念作介紹,如果你還對a 演算法不清楚的話,請看姊妹篇 初識a 演算法 這裡所舉的例子是參考amit主頁中的乙個源程式,使用這個源程式時,應該遵守一定的公約。二 a ...

深入了解A

一 前言 在這裡我將對a 演算法的實際應用進行一定的 並且舉乙個有關a 演算法在最短路徑搜尋的例子。值得注意的是這裡並不對a 的基本的概念作介紹,如果你還對a 演算法不清楚的話,請看姊妹篇 初識a 演算法 這裡所舉的例子是參考amit主頁中的乙個源程式,使用這個源程式時,應該遵守一定的公約。二 a ...

深入了解Dojo Data

譯自http www.sitepen.com blog 2010 10 13 dive into dojo data 使用dojo data有助於快速建立web應用的介面,且易於嵌入各種資料來源。它在使用者介面與底層資料之間提供了一層抽象層,使得使用者介面開發人員能夠專注於ui的開發,而無需擔心資料...