css设置背景图片透明度(css渐变背景色方向)

最近写了很多H5页面,在完成产品经理要求的过程中遇到了很多问题。国庆假期想着梳理一下最近用到的知识点,一分钟学会一个前端技能点。想想也很超值,反正哪里都是堵车,学点东西也是挺好的。今天先说一下CSS渐

最近写了很多H5页面,在完成产品经理要求的过程中遇到了很多问题。国庆假期想着梳理一下最近用到的知识点,一分钟学会一个前端技能点。想想也很超值,反正哪里都是堵车,学点东西也是挺好的。

css设置背景图片透明度(css渐变背景色方向)

今天先说一下CSS渐变背景色的实现,产品小姐姐要求按钮的颜色是绚丽的渐变色,所以我也去查了一下实现。

用到的属性自然还是background,语法是background: linear-gradient(directioncolor-stop1color-stop2, …);

这个属性可以实现从上到下,从左到右,左上角到右下角,甚至自定义渐变角度的渐变方向。我们常用的就是从上到下和从左到右渐变。

从上到下渐变:

#grad {

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 – 6.0 */

background: -o-linear-gradient(red, blue); /* Opera 11.1 – 12.0 */

background: -moz-linear-gradient(red, blue); /* Firefox 3.6 – 15 */

background: linear-gradient(red, blue); /* 标准的语法 */

}

从左到右渐变:

#grad {

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 – 6.0 */

background: -o-linear-gradient(right, red, blue); /* Opera 11.1 – 12.0 */

background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 – 15 */

background: linear-gradient(to right, red , blue); /* 标准的语法 */

}

关于CSS渐变色就和大家介绍到这里,你GET到了吗?欢迎点赞,评论,转发。

本站部分文章来自网络或用户投稿,如无特殊说明或标注,均为本站原创发布。涉及资源下载的,本站旨在共享仅供大家学习与参考,如您想商用请获取官网版权,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
科技百科

电脑安装打印机的方法和步骤图解(打印机程序服务没有运行怎么办)

2023-12-1 19:17:03

科技百科

注册拼多多店铺流程详解(拼多多开店步骤流程)

2023-12-1 19:18:03

搜索