开发者

Stack gradients in -webkit-gradient

开发者 https://www.devze.com 2023-01-18 09:43 出处:网络
Can I combine 3 gradient开发者_JAVA技巧s into one -webkit-gradient? I want to have an image that has a radial gradient for the \"background\" and \"middle-ground\" and a linear gradient for the \"fore

Can I combine 3 gradient开发者_JAVA技巧s into one -webkit-gradient? I want to have an image that has a radial gradient for the "background" and "middle-ground" and a linear gradient for the "foreground". Is this possible?


Yes, it is possible. Use three overlapping elements (divs are as good as any other), one each for the back-, mid-, and foregrounds. Style each one with its own gradient, using transparent as the underlying color, and the others will show through.


Edit: here's a two-layer version that should help get you started: http://jsbin.com/awali (requires a Webkit browser)

0

精彩评论

暂无评论...
验证码 换一张
取 消