頭條創作挑戰賽#

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

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

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

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

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

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

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

代碼實例如下：

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

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

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

CSS中很多隱藏元素的方法，但這些方法的可訪問性、布局、動畫、性能和事件處理的方式有所不同。

• 動畫： 一些CSS隱藏元素的方法一般是全有或者全無，元素要么是完全可見，要么是完全不可見，并且沒有中間狀態。其他的，比如透明度，可以是一個范圍的值，所以在這中間過程插入動畫成為可能；
• 可訪問性： 下面的每一種方法都會在視覺上隱藏一個元素，但不一樣會真正的去除DOM元素。有一些方式隱藏元素后，屏幕閱讀器仍然能讀取到元素內容；
• 事件處理： 隱藏元素之后，有些方式元素上的事件仍然能被觸發，而有些方式就會導致元素上的事件觸發無效；
• 表現： 瀏覽器加載并解析 HTML DOM 和 CSS 對象模型后，頁面將分三個階段呈現：布局（生成每個元素的幾何位置）、繪制（繪制每個元素的像素）、組合（以適當的順序放置元素層）。僅導致構圖變化的效果明顯比影響布局的效果更好。在某些情況下，瀏覽器還可以使用硬件加速。

下面就來看看CSS中隱藏元素的方式，以及每種方式的優缺點。

1. opacity 和 filter: opacity()

opacity: N 和 filter: opacity(N) 屬性可以傳遞一個 0 到 1 之間的數字，或者 0% 和 100% 之間的百分比，對應地表示完全透明和完全不透明。

• opacity: N：該屬性用來設置元素的透明度；
• filter: opacity(N) ：filter屬性用來設置元素的濾鏡，opacity是濾鏡重的透明度，用來設置元素的透明度。

div {
    opacity: 0;
}

div {
    filter: opacity(0%);
}
復制代碼

在現代瀏覽器中，這兩者之間幾乎沒有實際的區別，但如果同時應用多種效果（模糊、對比度、灰度等）時，應該使用 filter 屬性。

注意：opacity 可以設置動畫并提供出色的性能，但頁面上保留完全透明的元素可能會觸發事件。

2. color alpha 透明度

可以將元素的color、background-color 和 border-color 等屬性設置為rgba(0,0,0,0)，這樣就會使元素完全透明：

div {
	color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
}
復制代碼

這三個屬性都是支持設置動畫效果的，需要注意，透明度不能應用于帶有背景圖片的元素，除非它們是使用 linear-gradient 或類似方法生成的。

Alpha 通道可以設置為：

• transparent：完全透明（中間不能插入動畫）；
• rgba(r, g, b, a)：紅色、綠色、藍色和 alpha；
• hsla(h, s, l, a)：色相、飽和度、亮度和 alpha；
• #RRGGBBAA 或 #RGBA。
• 
  

3. transform

transform 屬性可以用于元素的平移、縮放、旋轉或傾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 屬性值來將元素隱藏：

div {
	transform: scale(0);
}

div {
	translate(-9999px, 0px)
}
復制代碼

transform 屬性提供了出色的性能和硬件加速，因為元素被有效地移動到了單獨的層中，并且可以在 2D 或 3D 中進行動畫處理。原始的布局空間會保持原樣，并不會受影響。使用這種方式隱藏的元素不會觸發任何事件。

4. clip-path

clip-path 屬性可以創建一個剪輯區域，用于確定元素的哪些部分是可見的。使用 clip-path: circle(0) 可以將元素進行隱藏。

div {
	clip-path: circle(0);
}
復制代碼

clip-path為添加動畫效果提供了空間，不過它只能在現代瀏覽器中使用。

5. visibility: hidden

visibility 屬性可以設置為 visible 或 hidden 來顯示和隱藏元素。

div {
	visibility: hidden;
}
復制代碼

除非使用collapse值，否則元素使用的空間保持不變。

6. display: none

display 可能是最常用的元素隱藏方法; 。當其值為 none 時元素就隱藏了。被隱藏的元素不會在頁面中占據位置，也不會響應綁定的監聽事件。

div {
  display: none;
}
復制代碼

然而，在大多數情況下，display 可能是最糟糕的 CSS 屬性。除非使用 position:absolute 將元素移出文檔流，或者采用contain屬性，否則它的隱藏過程無法設置動畫，并將觸發頁面重新布局。

7. z-index

可以通過將元素的 z-index 屬性設置為負值，以實現元素的隱藏。這實際上就是將元素放在了我們看不到的層。

div {
  z-index: -1;
}
復制代碼

8. position

position屬性允許使用top、bottom、left、right 從頁面中的默認位置移動元素。因此，絕對定位的元素可以通過左鍵：-9999px 等值移出屏幕：

div {
  position: absolute;
  left: -999px;
}
復制代碼

9. 覆蓋另一個元素

通過在元素的上面放置與背景顏色相同的元素，可以在視覺上隱藏一個元素。下面來使用::after偽元素來實現：

div::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
}
復制代碼

雖然這從技術上講是可以實現的，但是這樣做需要更多的代碼。

10. 縮小尺寸

可以通過使用width、height、padding、border-width 或 font-size 來縮小元素的尺寸以實現元素的隱藏。可能還需要應用 overflow: hidden; 來確保內容不會溢出。

div {
  height: 0;
  padding: 0;
  overflow: hidden;
}
復制代碼

使用這種形式我們可以在隱藏過程中使用動畫效果，并且他的性能會比 transform 好很多。

分類：

寫CSS的常用套路（下篇）...

點擊觀看——我寫CSS的常用套路（上篇）...

box-shadow

為盒子添加陰影，增加盒子的立體感，可以多層疊加，并且會使陰影更加絲滑

本demo地址：Pagination

內發光

注意到box-shadow還有個inset，用于盒子內部發光

利用這個特性我們可以在盒子內部的某個范圍內設定顏色，做出一個新月形

再加點動畫和濾鏡效果，“猩紅之月”閃亮登場！

注意到它散發著淡淡的紅光，其實就是2個偽元素應用了模糊濾鏡所產生的效果

本demo地址：Crimson Crescent Loading

text-shadow

文本陰影，本質上和box-shadow相同，只不過是相對于文本而言，常用于文本發光，也可通過多層疊加來制作霓虹文本和偽3D文本等效果

發光文本

本demo地址：Staggered GlowIn Text

霓虹文本

本demo地址：Neon Text

偽3D文本

本demo地址：Staggered Bouncing 3D Loading

background-clip:text

能將背景裁剪成文字的前景色，常用來和color: transparent配合生成漸變文本

本demo地址：Menu Hover Fill Text

gradient

漸變可以作為背景圖片的一種，具有很強的色彩效果，甚至可以用來模擬光

linear-gradient

線性漸變是筆者最常用的漸變

這個作品用到了HTML的dialog標簽，線性漸變背景，動畫以及overflow障眼法，細心的你看出來了嗎:)

本demo地址：Confirm Modal

radial-gradient

徑向漸變常用于生成圓形背景，上面例子中Snow的背景就是一個橢圓形的徑向漸變

此外，由于背景可以疊加，我們可以疊加多個不同位置大小的徑向漸變來生成圓點群，再加上動畫就產生了一種微粒效果，無需多余的div元素

本demo地址：Particle Button

conic-gradient

圓錐漸變可以用于制作餅圖

用一個偽元素疊在餅圖上面，并將content設為某個值（這個值通過CSS變量計算出來），就能制作出度量計的效果，障眼法又一次完成了它的使命

本demo地址：Gauge (No SVG)

filter

PS里的濾鏡，blur最常用

融合效果

當blur濾鏡和contrast濾鏡一起使用時，會產生一種融合（gooey）的奇特效果

本demo地址：Snow Scratch

backdrop-filter

對背景應用濾鏡，產生毛玻璃的效果

本demo地址：Frosted Glass

mix-blend-mode

PS里的混合模式，常用于文本在背景下的特殊效果

以下利用濾色模式（screen）實現文本視頻蒙版效果

本demo地址：Video Mask Text

clip-path

PS里的裁切，可以制作各種不規則形狀。如果和動畫結合也會相當有意思

本demo地址：Name Card Hover Expand

故障效果

由于clip-path有裁切功能，因此可以將多個文字疊在一起，并按比例裁切成多分，再應用交錯動畫，就能制作出酷炫的故障效果（glitch）。

本demo地址：Cross Bar Glitch Text

mask

PS里的遮罩。所謂遮罩，就是原始圖片只顯示遮罩圖片非透明的部分

鏤空效果

雖然clip-path能裁切出形狀，但它無法鏤空，因為形狀的里面它管不著

可能有人（包括我）會用偽元素來“模擬”鏤空（通過設置同樣的背景色），但這樣并非真的鏤空，換了個背景或浮在圖片上就會暴露出來，這時我們就要求助于遮罩了

假設，你想制作一個空心的圓環，那么你只需將一個徑向漸變作為元素的遮罩，并且第一個color-stop設置為透明，其他的color-stop設置為其他顏色即可，因為遮罩的定義就是只顯示遮罩圖片非透明的部分

注意：為了消除鋸齒，這個徑向漸變的中間需要有一個額外的color-stop用于緩沖，長度設置為原長度加0.5px即可

本demo地址：Circle Arrow Nav

-webkit-box-reflect

投影效果，不怎么常用，適合立體感強的作品

本demo地址：Card Flip Reflection

web animations

雖然這并不是一個CSS特性，但是它經常用于完成那些CSS所做不到的事情

那么何時用它呢？當CSS動畫中有屬性無法從CSS中獲取時，自然就會使用到它了

跟蹤鼠標的位置

目前CSS還尚未有獲取鼠標位置的API，因此考慮用JS來進行

通過查閱相關的DOM API，發現在監聽鼠標事件的API中，可通過e.clientX和e.clientY來獲得鼠標當前的位置

既然能夠獲取鼠標的位置，那么跟蹤鼠標的位置也就不是什么難事了：通過監聽mouseenter和mouseleave事件，來獲取鼠標出入一個元素時的位置，并用此坐標來當作鼠標的位移距離，監聽mousemove事件，來獲取鼠標在元素上移動時的位置，同樣地用此坐標來當作鼠標的位移距離，這樣一個跟蹤鼠標的效果就實現了

本demo地址：Menu Hover Image

CSS Houdini

CSS Houdini是CSS的底層API，它使我們能夠通過這套接口來擴展CSS的功能

讓漸變動起來

目前來說，我們無法直接給漸變添加動畫，因為瀏覽器不理解要改變的值是什么類型

這時，我們就可以利用CSS.registerProperty()來注冊我們的自定義變量，并聲明其語法類型（syntax）為顏色類型<color>，這樣瀏覽器就能理解并對顏色應用插值方法來進行動畫

還記得上文提到的圓錐漸變conic-gradient()嗎？既然它可以用來制作餅圖，那么我們能不能讓餅圖動起來呢？答案是肯定的，定義三個變量：--color1、--color2和--pos，其中--pos的語法類型為長度百分比<length-percentage>，將其從0變為100%，餅圖就會順時針旋轉出現

利用絕對定位和層疊上下文，我們可以疊加多個從小到大的餅圖，再給它們設置不同的顏色，應用交錯動畫，就有了下面這個炫麗的效果

本demo地址：Mawaru

彩蛋

將交錯動畫和偽類偽元素結合起來寫出來的慎重勇者風格的菜單

本demo地址：Shinchou Menu