css条纹背景样式、及方格斜纹背景的实现
一、横向条纹
如下代码:
background: linear-gradient(#fb3 %, #58a %)
上面代码表示整个图片的上部分20%和下部分20%是对应的纯色,只有中间的部分是渐变色。如果让中间的部分逐渐缩小,当中间部分变为0即上下两种颜色的七点和终点相同是,就没有了渐变而变成了两种颜色的色条:
background: linear-gradient(#fb3 %, #58a %);
接下来可以通过设置背景的大小,让背景高度变小并且背景默认为repeat,从而出现条纹状
background: linear-gradient(#fb3 %, #58a %);
background-size: % 30px;
设计坞https://www.wode007.com/sites/73738.html
我们可以不设定第二个颜色的起始位置,设置为0,则浏览器默认为接着上一个颜色开始:
background: linear-gradient(#fb3 %, #58a );
background-size:% 30px;
这样就形成了一个黄色占30%蓝色占70%的条纹状背景
也可以设置多种颜色,下面设置了三种颜色的条纹:
background: linear-gradient(#fb3 33.3%, #58a , #58a 66.6%,yellowgreen );
background-size: % 45px;
二、竖向条纹
只需要在linear-gradient方法中加一个前缀即可。注意还需颠倒background-size长宽的设定
background: linear-gradient(to rightright, #fb3 %, #58a );
background-size:30px %;
三、斜向条纹
可以通过修改background-size的值以及为linear-gradient添加角度来实现斜向的条纹:
background: linear-gradient(45deg, #fb3 %, #58a ); //让背景的渐变带有倾斜
background-size:30px 30px; //每一块小组成部分固定宽度和高度
但这样做的结果是只会形成一小块一小块的斜线,而不是整体div的斜线,我们需要以四个小div为一组绘制斜线,添加linear-gradient中的颜色分解:
background: linear-gradient(45deg, #fb3 %, #58a , #58a50%, #fb3 , #fb3 %, #58a );
background-size:30px 30px;
四、使用repeat-linear-gradient
对于斜线的背景绘制,使用repeat-linear-gradient方法更有效。使用该方法的时候,设置的颜色变化会自动进行重复直到铺满整个div。实例代码如下:
background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
通过这种方式可以任意更改角度,而不会出现上中方法中的调节困难
background: repeating-linear-gradient(60deg, #fb3, #fb315px, #58a , #58a 30px);
(这种方法其实相当于将size的控制和gradient的控制合到了一起)
五、关于颜色的设定
有时我们希望条纹背景的颜色之间是相近的颜色,但是如果手动设定这个颜色的#很不方便,也很难发现要选择什么样的颜色。可以使用如下方法:
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(,%,%,.),
hsla(,%,%,.)15px,
transparent ,transparent 30px);
这种方法的原理是:指定背景中最深的颜色,条文中其他相近色用透明度进行调整
六、综合实例
这里效果图一起放上来了,与下面的样式一一对应:
公用部分:
.stripes {
height: 250px;
width: 375px;
float: left;
margin: 10px;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px; /* 控制条纹的大小 */ -moz-box-shadow: 1px 1px 8px gray;
-webkit-box-shadow: 1px 1px 8px gray;
box-shadow: 1px 1px 8px gray;
}
图1:
.horizontal {
background-color: #0ae;
background-image: -webkit-gradient(linear, , %, color-stop(., rgba(, , , .)), color-stop(., transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(, , , .) %, transparent %, transparent);
background-image: -o-linear-gradient(rgba(, , , .) %, transparent %, transparent);
background-image: linear-gradient(rgba(, , , .) %, transparent %, transparent);
}
.vertical {
background-color: #f90;
background-image: -webkit-gradient(linear, , % , color-stop(., rgba(, , , .)), color-stop(., transparent), to(transparent));
background-image: -moz-linear-gradient(0deg, rgba(, , , .) %, transparent %, transparent);
background-image: -o-linear-gradient(0deg, rgba(, , , .) %, transparent %, transparent);
background-image: linear-gradient(0deg, rgba(, , , .) %, transparent %, transparent);
}
图3:
.picnic {
background-color:white;
background-image: -webkit-gradient(linear, , %, color-stop(., transparent), color-stop(., rgba(, , , .)), to(rgba(, , , .))),
-webkit-gradient(linear, , % , color-stop(., transparent), color-stop(., rgba(, , , .)), to(rgba(, , , .)));
background-image: -moz-linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
-moz-linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
background-image: -o-linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
-o-linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
background-image: linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
}
图4:
.picnic {
background-color:white;
background-image: -webkit-gradient(linear, , %, color-stop(., transparent), color-stop(., rgba(, , , .)), to(rgba(, , , .))),
-webkit-gradient(linear, , % , color-stop(., transparent), color-stop(., rgba(, , , .)), to(rgba(, , , .)));
background-image: -moz-linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
-moz-linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
background-image: -o-linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
-o-linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
background-image: linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
}
图5:
.angled- {
background-color: #c16;
background-image: -webkit-gradient(linear, , % %,
color-stop(., rgba(, , , .)), color-stop(., transparent),
color-stop(., transparent), color-stop(., rgba(, , , .)),
color-stop(., rgba(, , , .)), color-stop(., transparent),
to(transparent));
background-image: -moz-linear-gradient(-45deg, rgba(, , , .) %, transparent %,
transparent %, rgba(, , , .) %, rgba(, , , .) %,
transparent %, transparent);
background-image: -o-linear-gradient(-45deg, rgba(, , , .) %, transparent %,
transparent %, rgba(, , , .) %, rgba(, , , .) %,
transparent %, transparent);
background-image: linear-gradient(-45deg, rgba(, , , .) %, transparent %,
transparent %, rgba(, , , .) %, rgba(, , , .) %,
transparent %, transparent);
}
图6:
.checkered {
background-image: -webkit-gradient(linear, , % %, color-stop(., #), color-stop(., transparent), to(transparent)),
-webkit-gradient(linear, %, % , color-stop(., #), color-stop(., transparent), to(transparent)),
-webkit-gradient(linear, , % %, color-stop(., transparent), color-stop(., #)),
-webkit-gradient(linear, %, % , color-stop(., transparent), color-stop(., #));
background-image: -moz-linear-gradient(45deg, # %, transparent %, transparent),
-moz-linear-gradient(-45deg, # %, transparent %, transparent),
-moz-linear-gradient(45deg, transparent %, # %),
-moz-linear-gradient(-45deg, transparent %, # %);
background-image: -o-linear-gradient(45deg, # %, transparent %, transparent),
-o-linear-gradient(-45deg, # %, transparent %, transparent),
-o-linear-gradient(45deg, transparent %, # %),
-o-linear-gradient(-45deg, transparent %, # %);
background-image: linear-gradient(45deg, # %, transparent %, transparent),
linear-gradient(-45deg, # %, transparent %, transparent),
linear-gradient(45deg, transparent %, # %),
linear-gradient(-45deg, transparent %, # %);
}
HTML代码:
<div class="horizontal stripes"></div>
<div class="vertical stripes"></div>
<div class="picnic stripes"></div>
<div class="angled stripes"></div>
<div class="angled-135 stripes"></div>
<div class="checkered stripes"></div>
css条纹背景样式、及方格斜纹背景的实现的更多相关文章
- 精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...
- css3实现条纹以及方格斜纹背景
CSS代码: .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 5 ...
- 纯css3棋盘图案背景以及45度斜纹背景
css代码 .stripes { height: 250px; width: 375px; float: left; margin: 10px; ...
- style里的文字 背景 样式以及边框
<style> body{background:#FCC;} .c00 div{ margin:0 auto; padding:0;} #a01{ ...
- CSS背景样式
CSS是级联样式表,用来表现HTML等文件样式的语言,CSS能够真正做到网页的表现与内容分离的设计语言,也就是说,做好了一款网页,可以通过另一个后缀名是css的文件进行修改其中的样式,不过在html的 ...
- CSS设置边框、符号、背景样式、链接属性
一.CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白* ...
- 认识CSS中css背景样式设置
前端之HTML,CSS(五) CSS CSS背景 CSS可以添加背景颜色和背景图片,也可以对图片进行设置.设置的样式有: background-color 背景颜色 background-image ...
- Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器
一:长度及颜色单位 长度单位 px(像素) in(英寸) pt(点),一个标准的长度单位,1pt = 1/72in mm(毫米) cm ...
- CSS中如何使用背景样式属性,看这篇文章就够用了
css背景样式属性介绍 背景样式就是自定义HTML标签的背景颜色或背景图像. 背景属性说明表 属性名 属性值 描述 background-color #f00.red.rgb(255,0,0) 设置背 ...
随机推荐
- 第九届蓝桥杯JavaA组省赛真题
解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.分数 题目描述 1/1 + 1/2 + 1/4 + 1/8 + 1/16 + - 每项是前一项的一半,如果一共有20项, 求这个和是多 ...
- java实现BellmanFord算法
1 问题描述 何为BellmanFord算法? BellmanFord算法功能:给定一个加权连通图,选取一个顶点,称为起点,求取起点到其它所有顶点之间的最短距离,其显著特点是可以求取含负权图的单源最短 ...
- java实现平面4点最小距离
已知平面上若干个点的坐标. 需要求出在所有的组合中,4个点间平均距离的最小值(四舍五入,保留2位小数). 比如有4个点:a,b,c,d, 则平均距离是指:ab, ac, ad, bc, bd, cd ...
- java实现第五届蓝桥杯排列序数
排列序数 如果用a b c d这4个字母组成一个串,有4!=24种,如果把它们排个序,每个串都对应一个序号: abcd 0 abdc 1 acbd 2 acdb 3 adbc 4 adcb 5 bac ...
- 超强教程!在树莓派上构建多节点K8S集群!
在很长一段时间里,我对于在树莓派上搭建Kubernetes集群极为感兴趣.在网络上找到一些教程并且跟着实操,我已经能够将Kubernetes安装在树莓派上,并在三个Pi集群中工作.然而,在master ...
- 内存管理,goto的使用,内存的申请和释放,mmap,ioremap
1.内存管理 (将物理内存映射到内核空间(3G~4G)并使用) 深入内核: 伙伴系统 1.1基本概念 1)linux内核管理内存是以物理内存页为单位 一个物理内存页通常为4KB ...
- Email地址验证
<script>function validateForm(){ var x=document.forms["myForm"]["email"].v ...
- Centos7上添加自定义服务文件并开机启动
Ⅰ-1 写服务文件 [Unit] ##服务的说明Description:描述服务After:描述服务类别 [Service] ##服务运行参数的设置Type=forking是后台运行的形式Ex ...
- 在MS SQL(SSMS中)_Format_SQL_更改设置_增加命令
在MS SQL(SSMS中)_Format_SQL_更改设置_增加命令 目的:要格式化这么一段SQL语句(这是随便从网上Copy的一段),没细看内容,反正看到头疼,乱七八糟的不想看. select b ...
- 这样让你的 IDEA 好用到飞起来!
IDEA提高效率的配置项,每个开发者必须掌握的技能!下面这 32 条完美设置成功后,开发效率显著提升. 1.设置maven 1.在File->settings->搜索maven 2.Mav ...