css 背景重复渐变_CSS3重复渐变[CSS3提示]
有许多CSS3功能会改变我们装饰网站的方式,其中之一就是CSS3渐变。 在CSS3之前,我们肯定需要图像来创建渐变效果。 现在我们仅使用CSS就可以提供相同(更好)的效果
在之前的文章中,我们讨论了CSS3可以实现的两种类型的渐变:
- 径向和
- 线性渐变 。
这次,我们将研究它们的同级: 重复渐变 。
基本重复
重复渐变本质上是一种扩展。 语法类似于我们定义“径向”和“线性”渐变的方式,只是顾名思义,它还会在指定的方向上重复颜色。 要重复线性渐变,可以使用此功能: repeating-linear-gradient
,而要重复径向或椭圆形渐变,则可以使用此功能: repeating-radial-gradient
。
/*Linear*/
.gradient {background: repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);
}/*Radial*/
.gradient {background: repeating-radial-gradient(50% 50%, circle, #f9f9f9, #cccccc 20px);
}
除颜色重复外,其余代码没有太大区别。 以下是描述此颜色重复工作方式的简单图示。
尽管上面的图像仅说明了重复线性渐变,但是基本原理也适用于径向渐变,其中颜色将在任何方向上无限重复。 请点击以下链接查看演示。
- 观看演示
在下一部分中,我们将向您展示如何在实际示例中利用CSS3重复渐变。
示例:创建模式
重复渐变最常见的实现是创建背景图案。 在此示例中,我们将创建简单的垂直条纹图案。
.gradient {background: repeating-linear-gradient(0deg, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);
}
请注意,我们如何在同一点20px
定义#f9f9f9
和#cccccc
两种不同的颜色。 本示例将锐化这两种颜色之间的差异并消除模糊性。
要定向方向,我们只需更改角度– 90deg
将水平定向,而45deg
将对角定向,依此类推。
- 观看演示
示例:创建图纸
在第二个示例中,我们将创建您可能经常在笔记本中看到的打印纸。 要创建这种效果,我们只需要一个div
,没有图像,只有CSS。
.gradient {width: auto;height: 500px;margin: 0 50px;background: -webkit-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);background: -moz-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);background: -o-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);background: repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);background-size: 100% 21px;
}
注意,我们还添加了CSS3 background-size
属性,以指定100%20px的背景图像的大小。 尽管CSS3渐变显示“颜色”,但实际上它被分类为图像, 而不是颜色 。
接下来,我们将使用:before pseudo-element
在纸张左侧添加一个条纹。
.gradient:before {content: "";display: inline-block;height: 500px;width: 4px;border-left: 4px double #FCA1A1;position: relative;left: 30px;
}
我们完成了,这真的很简单吧? 现在,我们可以从下面的链接中看到它们的运行情况。
- 观看演示
- 下载源
更多资源
- Webkit CSS3渐变
- Microsoft开发人员网络上CSS3渐变
翻译自: https://www.hongkiat.com/blog/css3-repeating-gradients/
css 背景重复渐变_CSS3重复渐变[CSS3提示]相关推荐
- css背景图像属性_如何将CSS3转换应用于背景图像
css背景图像属性 CSS transformations are great, but they don't (yet?) apply to background images. This arti ...
- HTML+CSS 背景之雪碧图+渐变
一:雪碧图 雪碧图是什么? 一个页面可能会用到多个图片或者图标,如果每个图片都是一个单独的文件,则需要浏览器进行多次加载,浪费性能和带宽. 而且在某也情况下图片会延迟加载,导致用户体验不好. 将多个图 ...
- css背景图片高斯模糊_CSS3 filter(滤镜) 制作图片高斯模糊无需JS
本帖最后由 fengrui99 于 2019-7-8 11:20 编辑 这是一个寂寞的工作日,因为没有女盆友所以很寂寞,因为很寂寞所以来写教程.希望再看教程的你也是单身!啊,知道你是单身枫瑞贼开心!爽 ...
- Css3之基础-5 Css 背景、渐变属性
一.CSS 背景概述 背景属性的作用 - 背景样式可以控制 HTML 元素的背景颜色.背景图像等 - 背景色 - 设置单一的颜色作为背景 - 背景图像 - 以图片作为背景 - 可以设置图像的位置.平铺 ...
- CSS3,渐变效果(线性渐变,径向渐变,重复渐变),实现各种背景效果。
CSS3中的渐变实现(线性渐变.径向渐变) CSS3中的background新增属性实现,常见页面效果. CSS3中的图片边框的基本用法 CSS3中的transition属性,实现过渡效果. CSS3 ...
- 我的学习笔记——CSS背景渐变(Gradients)详解
我的学习笔记--CSS背景渐变(Gradients)详解 一.线性渐变(Linear Gradients) 1.语法 background-image: linear-gradient(directi ...
- html背景位置渐变,css 背景和渐变
css 背景和渐变 background 背景 所有背景属性都不能继承 在CSS2.1里,background属性的简写方式包含五种属性值 – background-color, background ...
- CSS中背景设置——渐变色和放射渐变
渐变:通过渐变可以设置一些复杂的背景颜色,可以从实现一个颜色向其他颜色过渡的效果 渐变是图片,通过 background-image设置 一.渐变色 可选值 1: linear-gradient [ ...
- php渐变背景颜色,css背景颜色渐变案例:线性渐变和径向渐变效果实例详解
渐变是两种或多种颜色之间的平滑过渡.以前,必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好, ...
- CSS背景不透明度[重复]
本文翻译自:CSS Background Opacity [duplicate] This question already has an answer here: 这个问题已经在这里有了答案: Ho ...
最新文章
- 温控自动烘焙系统的研究与实现
- 【必读】2019年深度学习自然语言处理最新十大发展趋势, 附报告下载
- 轻量级网络skipnet
- UA MATH567 高维统计 专题0 为什么需要高维统计理论?——理解稀疏向量与hard-threshold
- jekins构建触发器详解
- 【牛客 - 373B】666RPG(线性计数dp)
- 使用file_get_contents下载图片
- CenterNet :Objects as Points/CenterTrack:Tracking Objects as Points
- lcd1602显示自己的学号和姓名拼音的c语言程序,LCD1602显示字符.doc
- ICMP协议与ping
- pwm 正弦波_谈谈逆变器输出的方波与正弦波
- java utility 是什么_Java Utility类代码示例
- 搜狐自媒体还是蛮拼的 竟拉着加多宝做了一档美食节目
- 字节跳动年薪百万的测试开发=“半个产品+半个开发”?
- WCF 项目应用连载[6] - 升级Lig服务 - 设计ILigger 构建一个完善的Lig版本
- win10电脑安装Photoshop cs7软件版本
- Java如何打印九九乘法表
- 2016第四套人民币荧光币价格表一览
- 模块式柔性自动环形生产线及工厂智能机器人应用实验系统
- Android手机怎么找回微信好友,安卓手机微信好友删了怎么找回 恢复误删好友