iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 6
1
自我挑戰組

自我挑戰日記系列 第 6

CSS:background 線條

  • 分享至 

  • xImage
  •  

大家好 /images/emoticon/emoticon37.gif

前篇文章寫到的線條背景
還有另一種作法
就像是畫出大小向下一層一層增加
就可以做出下面的背景
https://ithelp.ithome.com.tw/upload/images/20171209/20107496JzOoZMiJxk.jpg

範例

background-image: linear-gradient(to right, #0575e6 45%, transparent 0),
                  linear-gradient(to right, #00b09b 75%, transparent 0), 
                  linear-gradient(to right, #f7b733 100%, transparent 0); 

https://ithelp.ithome.com.tw/upload/images/20171209/201074960WOCyLzk32.jpg
使用 linear-gradient(to right, #0575e6 45%, transparent 0),
作出一個 從 0 至 45% 沒漸層的顏色
會沒有漸層是因為 transparent 0
也可以用 transparent 45%
意思是 從 #0575e6 45% 漸層到 transparent 0 之後透明
若是 transparent 後面 45% 以上
比 #0575e6 的 45% 還多時就會產生漸層

另外如果是 background-image: transparent; 就會是全部為透明

--- 明日待續。


上一篇
CSS:background 線條、同心圓
下一篇
CSS:background 透明重疊
系列文
自我挑戰日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言