iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 7
2
自我挑戰組

自我挑戰日記系列 第 7

CSS:background 透明重疊

  • 分享至 

  • xImage
  •  

大家好 /images/emoticon/emoticon37.gif

繼續昨天的練習

用垂直、水平和距離畫出方格紙

background-image:
    linear-gradient(rgba(200,200,200,.3) 1px, transparent 0),
    linear-gradient(90deg, rgba(200,200,200,.3) 1px, transparent 0),
    linear-gradient(rgba(150,150,150,.3) 1px, transparent 0),
    linear-gradient(90deg, rgba(150,150,150,.3) 1px, transparent 0);
background-size: 
    10px 10px, 10px 10px, 50px 50px, 50px 50px;

https://ithelp.ithome.com.tw/upload/images/20171211/201074962cxI7UOYL8.jpg

再和上面一樣的角度把90度直接改成45度

background-image:
    linear-gradient(45deg, transparent 50%, rgba(200,200,200,.5) 50%),
    linear-gradient(-45deg, rgba(120,120,120,.5) 50%, transparent 0);
background-size: 50px 40px;

https://ithelp.ithome.com.tw/upload/images/20171211/20107496gHlSRpbSdQ.jpg
欸...!?
居然不是原本想的格子
這應該是2個三角形疊在一起的樣子

另外發現還可以像以下做法

linear-gradient(45deg, #777 25%, transparent 25%, transparent), 
linear-gradient(-45deg, #777 25%, transparent 25%, transparent), 
linear-gradient(45deg, transparent 75%, #777 75%), 
linear-gradient(-45deg, transparent 75%, #777 75%);

https://ithelp.ithome.com.tw/upload/images/20171211/201074963ejC7OMhUX.jpg 連續→https://ithelp.ithome.com.tw/upload/images/20171211/20107496zPHd9bFKNb.jpg

--- 明日待續。


上一篇
CSS:background 線條
下一篇
CSS:background 圓點背景
系列文
自我挑戰日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言