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) 设置背 ...
随机推荐
- Java实现寻找最小的k个数
1 问题描述 有n个整数,请找出其中最小的k个数,要求时间复杂度尽可能低. 2 解决方案 2.1 全部排序法 先对这n个整数进行快速排序,在依次输出前k个数. package com.liuzhen. ...
- Java实现大整数乘法
1 问题描述 计算两个大整数相乘的结果. 2 解决方案 2.1 蛮力法 package com.liuzhen.chapter5; import java.math.BigInteger; publi ...
- java算法集训结果填空题练习1
1 空瓶换汽水 浪费可耻,节约光荣.饮料店节日搞活动:不用付费,用3个某饮料的空瓶就可以换一瓶该饮料.刚好小明前两天买了2瓶该饮料喝完了,瓶子还在.他耍了个小聪明,向老板借了一个空瓶,凑成3个,换了一 ...
- pi-star镜像 下载地址
Pi-Star_NanoPi_Air_V3.4.17_09-Jan-2019.zip nanopi air点这里 Pi-Star_NanoPi_V3.4.17_09-Jan-2019.zip nan ...
- python—socket编程
一:客户端/服务器 架构 1.硬件C/S架构:(例如,打印机) 2.软件C/S架构:互联网中处处是C/S架构 腾讯作为服务端为你提供视频,你得下个腾讯视频客户端才能看它的视频 C/S架构与socket ...
- list基本运用
#include<iostream> #include<list> using namespace std; list<int>list1,list2; void ...
- mysql中的四种常用的引擎
MySQL常用的引擎有:InnoDB存储引擎.MyISAM存储引擎.MEMORY存储引擎.Archive存储引擎 InnoDB存储引擎 InnoDB是事务型数据库的首选引擎,支持事务安全表(ACID) ...
- 如何知道使用的GatewayWorker版本号?
打开GatewayWorker/Gateway.php, 在Gateway类内部VERSION常量标记了当前GatewayWorker的版本,例如下面GatewayWorker版本号为2.0.2. e ...
- 64位手机无法加载x5(libmttwebview.so is 32-bit instead of 64-bit)
x5内核暂时不提供64位的so文件,在64位手机上需要让AP以32位模式运行. 具体操作如下: 1.如果使用是Eclipse则需要将所有的.so文件都放置在so加载目录:lib/armeabi文件夹下 ...
- 在SpringMVC获取客户端传递的数据的方式
在处理请求的方法中,加入相对应的形参,保证形参参数名和传递的数据的参数名保持一致,就能够自动赋值 value:当不满足赋值条件时,可以使用value属性,指定映射关系 required:设置形参是否必 ...