用一個(gè)DIV畫圖通過background-image疊加實(shí)現(xiàn)
發(fā)布時(shí)間：2014-09-01 16:38:48 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了用一個(gè)DIV畫圖通過background-image疊加實(shí)現(xiàn)，通過 radial-gradient 徑向漸變，需要的朋友可以參考下
這些圖片都是用一個(gè)DIV繪制出來的，其實(shí)原理并不復(fù)雜。
這些圖片都是由CSS繪制出來的，通過background-image疊加實(shí)現(xiàn)，
如蘑菇頭的實(shí)現(xiàn)，通過 radial-gradient 徑向漸變 , linear-gradient 線性漸變相互疊加實(shí)現(xiàn)，如：
div {
width: 170px;
height: 140px;
background-image:
radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%),
linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%),
radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%),
radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
linear-gradient(to bottom, #ef0015 20%, #b2000c 100%);
border-radius: 140px 140px 80px 80px;
}
同時(shí)有前后遮擋關(guān)系的通過:before和:after偽元素的background-image來實(shí)現(xiàn)。
PS: 此種手法對(duì)并不完全支持舊版IE
這些圖片都是由CSS繪制出來的，通過background-image疊加實(shí)現(xiàn)，
如蘑菇頭的實(shí)現(xiàn)，通過 radial-gradient 徑向漸變 , linear-gradient 線性漸變相互疊加實(shí)現(xiàn)，如：
復(fù)制代碼
代碼如下:div {
width: 170px;
height: 140px;
background-image:
radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%),
linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%),
radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%),
radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
linear-gradient(to bottom, #ef0015 20%, #b2000c 100%);
border-radius: 140px 140px 80px 80px;
}
同時(shí)有前后遮擋關(guān)系的通過:before和:after偽元素的background-image來實(shí)現(xiàn)。
PS: 此種手法對(duì)并不完全支持舊版IE
相關(guān)文章
深入淺出CSS3 background-clip,background-origin和border-image教程
最近在準(zhǔn)備一個(gè)下學(xué)期參加比賽的概念網(wǎng)站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但僅僅是依靠w3schools上的文檔2011-01-27詳解html中background-image屬性的設(shè)置
background-image 屬性允許指定一個(gè)圖片展示在背景中。可以和 background-color 連用，因此如果圖片不重復(fù)地話，圖片覆蓋不到地地方都會(huì)被背景色填充。代碼很簡(jiǎn)單，只需要2015-11-09