css实现纹理条纹，波点背景效果

• 定义一个块级元素

.stripes {height: 250px;width: 375px;float: left;margin: 10px;background-size: 50px 50px;/* 控制条纹的大小 */box-shadow: 1px 1px 8px gray;
}

效果一：水平条纹

• 生成一个从上到下的水平条纹背景
  背景颜色为蓝色，条纹为白色

<div class="horizontal stripes"></div>.horizontal {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);
}

• 生成一个从下到上的水平渐变

<div class="horizontal2 stripes"></div>.horizontal {background-color: #0091ff;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);
}

效果二：竖向条纹

从左到右的垂直条纹背景

<div class="vertical stripes"></div>.vertical {background-color: #f90;background-image: -webkit-gradient(linear, left top, right top, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);background-image: linear-gradient(90deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

效果三：斜条纹

生成了一个以45度角斜向的条纹背景
背景颜色为黄色，条纹为白色

<div class="angled stripes"></div>.angled {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);
}

生成了一个以-45度角斜向的条纹背景
背景颜色为紫色，条纹为白色

.angled-135 {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);
}

效果四：网格

使用两个线性渐变，一个垂直渐变和一个水平渐变，创建一个网格或picnic毯子的效果。网格线的颜色是半透明的红色（rgba(200, 0, 0, .5)），网格间隙是透明的

<div class="picnic stripes"></div>.picnic {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(90deg, 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(90deg, 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(90deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
}

<div class="picnic2 stripes"></div>.picnic2 {background-color: white;background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 50%),linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 50%);
}

效果五：象棋盘1

生成了一个类似于国际象棋棋盘的条纹背景。条纹颜色为黑色

<div class="checkered stripes"></div>.checkered {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%);
}

效果六：象棋盘2

.bg {height: 250px;width: 375px;float: left;margin: 10px;box-shadow: 0 1px 8px #666;
}<div class="pt5 bg"></div>.pt5 {background-color: #eee;background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);background-size: 60px 60px;background-position: 0 0, 30px 30px;
}

效果七：红砖

<div class="pt7 bg"></div>.pt7 {background-color: silver;background-image: linear-gradient(335deg, #b00 23px, transparent 23px),linear-gradient(155deg, #d00 23px, transparent 23px),linear-gradient(335deg, #b00 23px, transparent 23px),linear-gradient(155deg, #d00 23px, transparent 23px);background-size: 58px 58px;background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}

效果八：波点/斑点

<div class="pt4 bg"></div>.pt4 {background-color: #655;background-image: radial-gradient(#f5dab8 30%, transparent 0);background-size: 20px 20px;
}

<div class="pt6 bg"></div>.pt6 {background-color: #655;background-image:radial-gradient(#f5dab8 30%, transparent 0),radial-gradient(#f5dab8 30%, transparent 0);background-size: 20px 20px;background-position: 0 0, 30px 30px;
}

css实现纹理条纹，波点背景效果相关推荐

1. css渐变斑马条纹_创建斑马条纹表

   css渐变斑马条纹 Scenario: you are the developer of a website for a band called The Tramps, who have embark ...

2. html用css写彩虹,如何使用纯CSS实现彩虹条纹文字的效果（附代码）

   本篇文章给大家带来的内容是关于如何使用纯CSS实现彩虹条纹文字的效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.co ...

3. html怎么做模糊条纹,CSS秘密花园：条纹背景

   <CSS Secrets>是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密.是一本CSSer值得一读的一本书,经过一段时间的阅读,我.@南北和@彦子一起将在W3cplu ...

4. css 世界之条纹背景

   水平与垂直条纹 线性渐变 linear-gradient 需求: 采用 css 实现个横向与纵向的条纹背景,类似如下: 横向条纹 首先我们都知道 linear-gradient 属性是用来实现线性渐变 ...

5. 纯CSS教你实现磨砂玻璃背景效果（附代码）

   磨砂玻璃效果已经在互联网上流行了很多年,Mac OS以其磨砂玻璃效果而闻名,Windows 10也通过其他一些灯光,深度,运动,材质,比例尺实现了磨砂玻璃的效果 在CSS中使用磨砂玻璃效果时,我们中的 ...

6. CSS 实现斑马条纹

   Part.1 linear-gradient() linear-gradient() 函数用于创建一个线性渐变的 "图像".为了创建一个线性渐变,你需要设置一个起始点和一个方向(指 ...

7. css实现斑马线条纹

   通过线性渐变,控制背景为白色-透明-白色-透明,然后控制背景大小,让背景background-repeat:repeat重复,就能实现斑马条纹 代码示例: div {width: 400px;back ...

8. html怎么做模糊条纹,如何使用纯CSS实现彩虹条纹文字的效果

   源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义dom,容器中包含文本,并且包含4个用于特效,的data-tex ...

9. css实现倾斜条纹（斑马线），可用于进度条等

   repeating-linear-gradient(70deg, #0658C5 0px, #0658C5 10px, #0540BA 0px,#0540BA 20px); 效果:

最新文章

1. Linux学习笔记之文件管理和目录管理类命令
2. 教你一招看清编程语言的发展趋势及未来方向
3. Liunx配置网络到nginx环境搭建步骤
4. CVPR 2020｜华为发布基于连续进化的CARS算法，0.4GPU天输出帕累托前沿
5. OSSchedLock()--上锁函数
6. ELK学习总结（2-5）elk的版本控制
7. 安卓案例：基于HttpURLConnection下载文本与图片
8. java foreach多线程_java关键字(一)
9. 日均保护原创超6万篇，腾讯“至信链”助企鹅号作者一键维权
10. mysql做一个邮箱_php+mysql 做一个注册页面 注册成功后给用户邮箱发一份确认邮件，发送邮件的代码怎么加到下面的代码里了...
11. NetBEUI协议巧安装
12. Adreno GPU上Android 游戏开发介绍 (3)
13. 微信H5开发问题集锦
14. drupal7 分页
15. 统计学三大相关系数之Pearson相关系数、Spearman相关系数
16. 2.2 zio入门——按顺序组合ZIO
17. 生信工作流框架搭建 | 从零开始入门指南 - 00工作流之华山论剑
18. fast-lio2论文阅读 《FAST-LIO2: Fast Direct LiDAR-inertial Odometry》
19. 华为鸿蒙新平板,华为鸿蒙Beta 3.0 版本推送更新 预装鸿蒙新平板获入网许可
20. Python数字拆分

热门文章

1. pytorch【神经网络训练minst-fashion数据集】
2. python做社会网络分析系统_科学网—python 社会网络分析工具之igraph - 郗强的博文...
3. 桌面组件移动端技术资料集锦
4. alias 命令应用详解
5. 【一天时间|JavaScript进阶】函数式编程高阶函数的应用
6. 多序列比对算法MAFFT以及HMMER和profile文件的使用
7. 机器学习之神经网络与支持向量机
8. 如何把sql查询出来的结果当做另一个sql的条件查询
9. 罗德里格斯公式及其推导
10. 计算机台式机怎么用无限,台式机无线网卡怎么用，简单操作不求人