备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（中）

2024-04-16 87
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果

【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（上）：https://developer.aliyun.com/article/1483426


8.不等宽背景条纹

  background: linear-gradient(#78C9DB 70%,#0acf00 0%);
  background-size: 100%  20px;

9.瓷砖条纹背景

background:linear-gradient(45deg,#78C9DB 50%,#0acf00 50%);
background-size:30px 30px;

10.草地效果

background:linear-gradient(-45deg,#0acf00 50%,#78C9DB 50%);
background-size:30px 100%;

11.斜条纹背景

  background:linear-gradient(-45deg,#0acf00 25%,#78C9DB 0,#78C9DB 50%,#0acf00 0,#0acf00 75%,#78C9DB 0);
background-size: 30px 30px;

12.单色斜条纹背景（利用透明度及transparent）

background:#fff repeating-linear-gradient(30deg,rgba(0,0,0,.5),rgba(0,0,0,.5)15px,transparent 0,transparent 30px);

13.格子衫纹理

background:#fff;
background: linear-gradient(90deg,rgba(100,0,0,.5) 50%,transparent 0),linear-gradient(rgba(100,0,0,.5) 50%,transparent 0);
background-size: 30px 30px;

14.波点背景

background:#a95f44;
background-image:radial-gradient(#fff 30%,transparent 0),radial-gradient(#fff 30%,transparent 0);
background-size:20px 20px;
background-position:0 0,10px 10px;  // 必须是background-size尺寸的1/2

15.棋盘背景

background: #fff;
background-image:linear-gradient(45deg,#a95f44  26%,transparent 0,transparent 75%,#a95f44  0),
linear-gradient(45deg,#a95f44  26%,transparent 0,transparent 75%,#a95f44 0);
background-size:30px 30px;
background-position:0 0,15px 15px;

16.蔷薇紫

background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%);
background-size: 20px 20px;
background-position: center center;

17.全栈蓝

background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%);
background-size: 20px 20px;
background-position: center center;

18.多重角向渐变

background: repeating-conic-gradient(#fff, #000, #fff 30deg);

19.闪光花纹纹理

background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);

20.粉色年轮纹理

 background-image: repeating-radial-gradient(
      circle at center center,
      rgb(241, 43, 239),
      rgb(239, 246, 244) 3px
  );

21.蓝色磨砂

  background-image: repeating-radial-gradient(
      ellipse at center center,
      rgb(75, 154, 242),
      rgb(64, 135, 228),
      rgb(54, 117, 214),
      rgb(43, 98, 200),
      rgb(33, 79, 185),
      rgb(22, 60, 171),
      rgb(12, 42, 157),
      rgb(1, 23, 143) 0.01px
  );

22.双色条纹

  background-color: #0ae;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
  background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-size: 50px 50px;
  -moz-box-shadow: 1px 1px 8px gray;
  -webkit-box-shadow: 1px 1px 8px gray;
  box-shadow: 1px 1px 8px gray;

23.双色黄色条纹

  background-color: #f90;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
  background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-size: 50px 50px;
  -moz-box-shadow: 1px 1px 8px gray;
  -webkit-box-shadow: 1px 1px 8px gray;
  box-shadow: 1px 1px 8px gray;

24.粉色

  background-color: white;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))), -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-size: 50px 50px;
-moz-box-shadow: 1px 1px 8px gray;
-webkit-box-shadow: 1px 1px 8px gray;
box-shadow: 1px 1px 8px gray;

25.绿色双色

background-color: #ac0;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-size: 50px 50px;
-moz-box-shadow: 1px 1px 8px gray;
-webkit-box-shadow: 1px 1px 8px gray;
box-shadow: 1px 1px 8px gray;

26.红色双色

background-color: #c16;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-size: 50px 50px;
-moz-box-shadow: 1px 1px 8px gray;
-webkit-box-shadow: 1px 1px 8px gray;
box-shadow: 1px 1px 8px gray;

27.黑白块

background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%, #555 75%), -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(45deg, transparent 75%, #555 75%), -o-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent), linear-gradient(-45deg, #555 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%);
background-size: 50px 50px;
-moz-box-shadow: 1px 1px 8px gray;
-webkit-box-shadow: 1px 1px 8px gray;
box-shadow: 1px 1px 8px gray;

28.铜钱纹理

background-color: #ddeeff;
background-image: radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%),radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%);
background-position: 0 0, 40px 40px;
background-size: 80px 80px;

29.红白双色

background: white;
background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.5) 50%, transparent 0), linear-gradient(rgba(200, 0, 0, 0.5) 50%, transparent 0);
background-size: 30px 30px;

30.蓝线格

background: #58a;
background-image: linear-gradient(white 1px, transparent 0), linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;

31.宽松蓝线格

background: #58a;
background-image: linear-gradient(white 2px, transparent 0), linear-gradient(90deg, white 2px, transparent 0), linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 0), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;

32.点纹理

background: #655;
background-image: radial-gradient(#d2b48c 20%, rgba(0, 0, 0, 0) 0%);
background-size: 30px 30px;

33.粗点纹理

background: #655;
background-image: radial-gradient(#d2b48c 20%, rgba(0, 0, 0, 0) 0%), radial-gradient(#d2b48c 20%, rgba(0, 0, 0, 0) 0%);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

34.细点纹理

background: #655;
background-image: radial-gradient(#d2b48c 10%, rgba(0, 0, 0, 0) 0%), radial-gradient(#d2b48c 10%, rgba(0, 0, 0, 0) 0%);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

34.白色栅格

  background: #eee;
  background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0);
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;

35.马赛克

  background: #eee;
  background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0), linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0);
  background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
  background-size: 30px 30px;

36.粗点马赛克

  background: #eee;
  background-image: linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 0), linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 0);
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;

37.红黑格

  background: black;
  background-image: linear-gradient(45deg, red 25%, transparent 0, transparent 75%, red 0), linear-gradient(45deg, red 25%, transparent 0, transparent 75%, red 0);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;

38.浅马赛克

  background: #eee url('data:image/svg+xml,            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" >            <rect x="50" width="50" height="50" />            <rect y="50" width="50" height="50" />            </svg>');
  background-size: 30px 30px;

39.四色纹理

  background: linear-gradient(90deg, #fb3 15%, #655 0, #655 40%, #ab4 0, #ab4 65%, #f0e2db 0);
  background-size: 80px 100%;

40.可爱纹理

  background: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px, radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px), #8a3;
  background-size: auto, auto, auto;
background-size: 20px 20px;


【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）：https://developer.aliyun.com/article/1483430

文章标签：
前端开发
微芒不朽
目录
相关文章
微芒不朽
|
13天前
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
微芒不朽
58 0
微芒不朽
|
13天前
|
前端开发 容器
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（上）
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
微芒不朽
38 1
TechWJ
|
2月前
|
前端开发 UED
css3背景与渐变
css3背景与渐变
TechWJ
28 0
祈澈菇凉
|
5月前
|
前端开发
【前端切图】CSS文字渐变和背景渐变
【前端切图】CSS文字渐变和背景渐变
祈澈菇凉
37 0
祈澈菇凉
|
5月前
|
移动开发 前端开发
移动开发之css3实现背景几种渐变效果
移动开发之css3实现背景几种渐变效果
祈澈菇凉
45 0
南城FE
|
8月前
|
前端开发
通过构建背景图学习CSS径向渐变
通过构建背景图学习CSS径向渐变
南城FE
36 0
南城FE
|
8月前
|
前端开发
基于一段神奇的CSS渐变制作噪点效果
基于一段神奇的CSS渐变制作噪点效果
南城FE
85 0
肥晨
|
前端开发 JavaScript
CSS奇思妙想之-利用CSS裁剪（clip-path）完成各种图形
CSS奇思妙想之-利用CSS裁剪（clip-path）完成各种图形
肥晨
216 1
CSS奇思妙想之-利用CSS裁剪（clip-path）完成各种图形
t75yjb52rsccc
CSS3第五课 平角在渐变的基础上
CSS3第五课 平角在渐变的基础上
t75yjb52rsccc
90 0
CSS3第五课 平角在渐变的基础上
微芒不朽
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(中)
一直对渐变背景这块比较感兴趣，但是因为每天加班实在太忙了，任务也比较多。所以就只能下班的时间研究渐变背景这方面的知识，一来满足了自己的好奇心，二来可以更加了解这方面的知识。
微芒不朽
480 0
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(中)

热门文章

最新文章

  • 1
    大咖云集，技术宅开趴倒计时 —— 2017 Kubernetes Meetup | 成都站
  • 2
    Centos7：“Entering emergency mode. Exit the shell to continue”错误解决方法
  • 3
    一分钟了解阿里云产品：解析不生效的原因诊断
  • 4
    DVWA-SQL注入(SQL Injection)低/中/高级别
  • 5
    教AI打星际2也不难，试试暴雪和DeepMind的工具包 | 附论文+代码
  • 6
    python入门学习之变量注释篇
  • 7
    Rainbow分页解决方案
  • 8
    Androids含文档erver结束（工具包 Httputils）两
  • 9
    GitHub最新命令使用教程
  • 10
    Android事件分发详解(二)——Touch事件传入到Activity的流程
  • 1
    Serverless 应用引擎产品使用之在阿里云函数计算中通过调用函数如何解决
    116
  • 2
    Serverless 应用引擎产品使用之在阿里函数计算中，使用签名认证调用HTTP触发器的步骤如何解决
    125
  • 3
    Serverless 应用引擎产品使用之在阿里函数计算中，设置单实例并发1如何解决
    121
  • 4
    Serverless 应用引擎产品使用之在阿里云函数计算中，需要处理的文件大于100MB如何解决
    114
  • 5
    Serverless 应用引擎产品使用之在阿里函数计算中开启函数计算 API 接口如何解决
    91
  • 6
    Python的进程锁，进程队列
    107
  • 7
    Serverless 应用引擎产品使用之在Serverless 应用引擎中跳过AHAS创建如何解决
    102
  • 8
    Python的进程，以及进程同步，守护进程详细解读
    127
  • 9
    Serverless 应用引擎产品使用之在 Serverless 应用引擎中，查看镜像文件中的 JAR 文件如何解决
    118
  • 10
    Python中的反射
    111

    • 相关课程

    更多
  • 前端开发CSS基础
  • CSS 快速掌握

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考