同色系條紋

2021-08-20 12:35:53 字數 678 閱讀 8475

在大多數情況下,我們使用的條紋並不是顏色相差較大的幾種顏色組成的,往往是屬於同色系的。例如實現下圖所示的條紋圖案

實現方式:

background: repeating-linear-gradient(30deg, 

#79b, #79b 30px,

#58b 0, #58b 60px);

不足:使用了兩個同色系的顏色,想要改變這個條紋的主色調,需要修改4個地方,也沒能體現出這兩個顏色之間的關係。

更好的實現思路:將深色作為背景色、同時把半透明白色的條紋疊加在背景之上得到淺色的條紋。

background:  #58b;

background-image: repeating-linear-gradient(30deg,

hsla(0,0%,100%,.2),hsla(0,0%,100%,.2) 30px,

transparent 0, transparent 60px);

優點:

1. 當要改變背景主色調的時候,只需要修改一處;

2. 對於不支援css漸變的瀏覽器來說,背景色可以起到回退的作用。

RGB表色系統

為了建立統一的顏色度量引數,在累積了大量實驗材料的基礎上,國際照明委員會選定了三原色系統的一組三原色為 紅 r 波長700.0nm的可見光譜長波段末端 綠 g 波長546.1nm的水銀光譜 藍 b 波長435.8nm的水銀光譜。經實驗和計算確定,匹配等能白光的 r g b 三原色單位的亮度比率為1 ...

灰色系統 灰色系統的定義及其理論內容

社會 經濟 農業 工業 生態等許多系統,是根據研究物件所屬的領域和範圍命名的。在控制理論中,人們常用顏色的深淺形容資訊的明確程度,如用 黑 表示未知資訊,用 白 表示資訊完全明確,用 灰 表示部分資訊明確 部分資訊不明確。相應地,資訊完全明確的系統稱為白色系統 資訊完全不明確的系統稱為黑色系統 部分...

動畫條紋進度指示

使用 progress 容器來指定進度條的最大值。使用 progress bar 來表示當前的進度。progress bar 要求的內嵌樣式,使用全域性實用css或自定義css來設定其寬度。progress bar 還需要一些 role and 與屬性,使其訪問友好 無障礙 一開始呼叫bootstr...