css实现网格背景
只使用一个渐变时,我们能创建的图案并不多,当我们把多个渐变图案组合起来,让他们透过彼此的透明区域显现时,神奇的事情就发生了!我们首先想到的是把水平和水质条纹叠加起来,就可以得到各种各样的网格。
1. 网格背景
html
<div class="stripe"></div>
css
.stripe{
width: 250px;
height: 150px;
margin: 50px;
background: linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
background-size: 30px 30px;
}
效果图
2.波点背景
css
.stripe{
width: 250px;
height: 150px;
margin: 50px;
background-color: #655;
background-image: radial-gradient(tan 30%,transparent 0);
background-size: 30px 30px;
}
效果图
当然,这个不是我们想要的图案,其实,我们可以生成两层圆点阵列图案,并把他们的背景定位错开,这样就可以得到真正的波点阵列了。
css
.stripe{
width: 250px;
height: 150px;
margin: 50px;
background-color: #655;
background-image: radial-gradient(tan 30%,transparent 0),
radial-gradient(tan 30%,transparent 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px;
}
效果图
3. 棋盘背景
css
.stripe{
width: 250px;
height: 150px;
margin: 50px;
background-image: linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0),
linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0);
background-color: #eee;
background-size: 30px 30px;
background-position: 0 0,15px 15px;
}
效果图
了解更多关于径向渐变https://www.w3cplus.com/content/css3-gradient
css实现网格背景的更多相关文章
- 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等
1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题
在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- 用css实现条纹背景
我先额外的说一下怎么用CSS绘制三角形: 绘制三角形是把边框加粗,将元素的宽高都设为0,让其余的边框颜色透明,下面我们来看实现的代码: 先把边框的颜色设置成不同颜色: #div{ border-col ...
- css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...
- 第 17 章 CSS 边框与背景[下]
学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一.设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...
- 第 17 章 CSS 边框与背景[上]
学习要点: 1.声明边框 2.边框样式 3.圆角边框 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一.声明边框 边框的声明有 ...
- css 使用background背景实现border边框效果
css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...
- css如何使背景图片水平居中
CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-pos ...
随机推荐
- php两个问号??表示什么意思,PHP两个问号运算符,双问号表达式
有同学给子恒老师留言, 说在php源代码中看到有两个问号?? 不知道是什么意思. 其实两个问题??是php7新推出的表达式, c = a ?? b; 表示如果a非空,则c = a, 如果a为空,则 c ...
- Java----前端验证之验证码额实现
验证码是常用的登录验证方式之一,最大的作用就是保证安全,验证码的生成在java中实现的方式有很多种,比如后台生成传输到前端页面,在前台直接生成进行验证,下面写一个最简单实现验证码验证登录的例子. 生成 ...
- CSS clear 清除浮动,兼容各浏览器
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clear{zoom ...
- OSChinaclient源代码学习(1)--Android与Server的交互
这里主要针对"综合"这个选项卡下的"资讯"模块为样例.对核心代码进行解读. 准备工作:參考我的另外一篇博客 http://blog.csdn.net/csp27 ...
- C#线程等待句柄
相互排斥对象 Mutex private Mutex m = new Mutex(); public void Method(){ m.WaitOne(); //运行操作 m.ReleaseMutex ...
- Codeforces548A:Mike and Fax
While Mike was walking in the subway, all the stuff in his back-bag dropped on the ground. There wer ...
- js实现刷新
Javascript刷新页面的几种方法: 代码如下:1,history.go(0) 2,location.reload() 3,location=location 4,location.assign( ...
- 一.windows环境下rabbitMQ的的安装和配置
rabbitMQ是AMQP 0-9-1(高级消息队列协议)的一个实现,使用Erlang语言编写,利用了Erlang的分布式特性.用它来实现分布式消息队列. 1.因为是用Erlang编写的,所以首先要安 ...
- 自学WPF之Binding(一)
Binding的重要性就不作介绍了,是作为数据交互的支撑,下面来介绍一下为Binding指定源(Source)的几种方法: 把普通CLR类型的单个对象指定为Source:包括.NET Framewor ...
- redis的list类型
1.简单介绍 redis的list类型其实就是一个每个元素都是string类型的双向链表.所以lpush.rpush.lpop和rpop命令的时间复杂度是O(1),list会记录链表的长度,所以lle ...