一、横向条纹
如下代码:

  1. background: linear-gradient(#fb3 %, #58a %)

上面代码表示整个图片的上部分20%和下部分20%是对应的纯色,只有中间的部分是渐变色。如果让中间的部分逐渐缩小,当中间部分变为0即上下两种颜色的七点和终点相同是,就没有了渐变而变成了两种颜色的色条:

  1. background: linear-gradient(#fb3 %, #58a %);

接下来可以通过设置背景的大小,让背景高度变小并且背景默认为repeat,从而出现条纹状

  1. background: linear-gradient(#fb3 %, #58a %);
  2. background-size: % 30px;

设计坞https://www.wode007.com/sites/73738.html

我们可以不设定第二个颜色的起始位置,设置为0,则浏览器默认为接着上一个颜色开始:

  1. background: linear-gradient(#fb3 %, #58a );
  2. background-size:% 30px;

这样就形成了一个黄色占30%蓝色占70%的条纹状背景
也可以设置多种颜色,下面设置了三种颜色的条纹:

  1. background: linear-gradient(#fb3 33.3%, #58a , #58a 66.6%,yellowgreen );
  2. background-size: % 45px;

 
二、竖向条纹
只需要在linear-gradient方法中加一个前缀即可。注意还需颠倒background-size长宽的设定

  1. background: linear-gradient(to rightright, #fb3 %, #58a );
  2. background-size:30px %;

三、斜向条纹
可以通过修改background-size的值以及为linear-gradient添加角度来实现斜向的条纹:

  1. background: linear-gradient(45deg, #fb3 %, #58a ); //让背景的渐变带有倾斜
  2. background-size:30px 30px; //每一块小组成部分固定宽度和高度

但这样做的结果是只会形成一小块一小块的斜线,而不是整体div的斜线,我们需要以四个小div为一组绘制斜线,添加linear-gradient中的颜色分解:

  1. background: linear-gradient(45deg, #fb3 %, #58a , #58a50%, #fb3 , #fb3 %, #58a );
  2. background-size:30px 30px;

 

四、使用repeat-linear-gradient
对于斜线的背景绘制,使用repeat-linear-gradient方法更有效。使用该方法的时候,设置的颜色变化会自动进行重复直到铺满整个div。实例代码如下:

  1. background: repeating-linear-gradient(45deg, #fb3, #58a 30px);

通过这种方式可以任意更改角度,而不会出现上中方法中的调节困难

  1. background: repeating-linear-gradient(60deg, #fb3, #fb315px, #58a , #58a 30px);

(这种方法其实相当于将size的控制和gradient的控制合到了一起)
 
五、关于颜色的设定
有时我们希望条纹背景的颜色之间是相近的颜色,但是如果手动设定这个颜色的#很不方便,也很难发现要选择什么样的颜色。可以使用如下方法:

  1. background: #58a;
  2. background-image: repeating-linear-gradient(30deg,
  3. hsla(,%,%,.),
  4. hsla(,%,%,.)15px,
  5. transparent ,transparent 30px);

这种方法的原理是:指定背景中最深的颜色,条文中其他相近色用透明度进行调整

六、综合实例
这里效果图一起放上来了,与下面的样式一一对应:

公用部分:

  1. .stripes {
  2. height: 250px;
  3. width: 375px;
  4. float: left;
  5. margin: 10px;
  6. -webkit-background-size: 50px 50px;
  7. -moz-background-size: 50px 50px;
  8. background-size: 50px 50px; /* 控制条纹的大小 */
  9.  
  10. -moz-box-shadow: 1px 1px 8px gray;
  11. -webkit-box-shadow: 1px 1px 8px gray;
  12. box-shadow: 1px 1px 8px gray;
  13. }

图1:

  1. .horizontal {
  2. background-color: #0ae;
  3. background-image: -webkit-gradient(linear, , %, color-stop(., rgba(, , , .)), color-stop(., transparent), to(transparent));
  4. background-image: -moz-linear-gradient(rgba(, , , .) %, transparent %, transparent);
  5. background-image: -o-linear-gradient(rgba(, , , .) %, transparent %, transparent);
  6. background-image: linear-gradient(rgba(, , , .) %, transparent %, transparent);
  7. }
 
图2:
  1. .vertical {
  2. background-color: #f90;
  3. background-image: -webkit-gradient(linear, , % , color-stop(., rgba(, , , .)), color-stop(., transparent), to(transparent));
  4. background-image: -moz-linear-gradient(0deg, rgba(, , , .) %, transparent %, transparent);
  5. background-image: -o-linear-gradient(0deg, rgba(, , , .) %, transparent %, transparent);
  6. background-image: linear-gradient(0deg, rgba(, , , .) %, transparent %, transparent);
  7. }

图3:

  1. .picnic {
  2. background-color:white;
  3. background-image: -webkit-gradient(linear, , %, color-stop(., transparent), color-stop(., rgba(, , , .)), to(rgba(, , , .))),
  4. -webkit-gradient(linear, , % , color-stop(., transparent), color-stop(., rgba(, , , .)), to(rgba(, , , .)));
  5. background-image: -moz-linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
  6. -moz-linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
  7. background-image: -o-linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
  8. -o-linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
  9. background-image: linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
  10. linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
  11. }

图4:

  1. .picnic {
  2. background-color:white;
  3. background-image: -webkit-gradient(linear, , %, color-stop(., transparent), color-stop(., rgba(, , , .)), to(rgba(, , , .))),
  4. -webkit-gradient(linear, , % , color-stop(., transparent), color-stop(., rgba(, , , .)), to(rgba(, , , .)));
  5. background-image: -moz-linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
  6. -moz-linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
  7. background-image: -o-linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
  8. -o-linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
  9. background-image: linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
  10. linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
  11. }

图5:

  1. .angled- {
  2. background-color: #c16;
  3. background-image: -webkit-gradient(linear, , % %,
  4. color-stop(., rgba(, , , .)), color-stop(., transparent),
  5. color-stop(., transparent), color-stop(., rgba(, , , .)),
  6. color-stop(., rgba(, , , .)), color-stop(., transparent),
  7. to(transparent));
  8. background-image: -moz-linear-gradient(-45deg, rgba(, , , .) %, transparent %,
  9. transparent %, rgba(, , , .) %, rgba(, , , .) %,
  10. transparent %, transparent);
  11. background-image: -o-linear-gradient(-45deg, rgba(, , , .) %, transparent %,
  12. transparent %, rgba(, , , .) %, rgba(, , , .) %,
  13. transparent %, transparent);
  14. background-image: linear-gradient(-45deg, rgba(, , , .) %, transparent %,
  15. transparent %, rgba(, , , .) %, rgba(, , , .) %,
  16. transparent %, transparent);
  17. }

图6:

  1. .checkered {
  2. background-image: -webkit-gradient(linear, , % %, color-stop(., #), color-stop(., transparent), to(transparent)),
  3. -webkit-gradient(linear, %, % , color-stop(., #), color-stop(., transparent), to(transparent)),
  4. -webkit-gradient(linear, , % %, color-stop(., transparent), color-stop(., #)),
  5. -webkit-gradient(linear, %, % , color-stop(., transparent), color-stop(., #));
  6. background-image: -moz-linear-gradient(45deg, # %, transparent %, transparent),
  7. -moz-linear-gradient(-45deg, # %, transparent %, transparent),
  8. -moz-linear-gradient(45deg, transparent %, # %),
  9. -moz-linear-gradient(-45deg, transparent %, # %);
  10. background-image: -o-linear-gradient(45deg, # %, transparent %, transparent),
  11. -o-linear-gradient(-45deg, # %, transparent %, transparent),
  12. -o-linear-gradient(45deg, transparent %, # %),
  13. -o-linear-gradient(-45deg, transparent %, # %);
  14. background-image: linear-gradient(45deg, # %, transparent %, transparent),
  15. linear-gradient(-45deg, # %, transparent %, transparent),
  16. linear-gradient(45deg, transparent %, # %),
  17. linear-gradient(-45deg, transparent %, # %);
  18. }

HTML代码:

  1. <div class="horizontal stripes"></div>
  2. <div class="vertical stripes"></div>
  3. <div class="picnic stripes"></div>
  4. <div class="angled stripes"></div>
  5. <div class="angled-135 stripes"></div>
  6. <div class="checkered stripes"></div>

css条纹背景样式、及方格斜纹背景的实现的更多相关文章

  1. 精通CSS+DIV网页样式与布局--页面背景

    上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...

  2. css3实现条纹以及方格斜纹背景

    CSS代码: .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 5 ...

  3. 纯css3棋盘图案背景以及45度斜纹背景

    css代码  .stripes {     height: 250px;     width: 375px;     float: left;          margin: 10px;      ...

  4. style里的文字 背景 样式以及边框

    <style>        body{background:#FCC;}        .c00 div{ margin:0 auto; padding:0;}        #a01{ ...

  5. CSS背景样式

    CSS是级联样式表,用来表现HTML等文件样式的语言,CSS能够真正做到网页的表现与内容分离的设计语言,也就是说,做好了一款网页,可以通过另一个后缀名是css的文件进行修改其中的样式,不过在html的 ...

  6. CSS设置边框、符号、背景样式、链接属性

    一.CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白* ...

  7. 认识CSS中css背景样式设置

    前端之HTML,CSS(五) CSS CSS背景 CSS可以添加背景颜色和背景图片,也可以对图片进行设置.设置的样式有: background-color 背景颜色 background-image ...

  8. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

  9. CSS中如何使用背景样式属性,看这篇文章就够用了

    css背景样式属性介绍 背景样式就是自定义HTML标签的背景颜色或背景图像. 背景属性说明表 属性名 属性值 描述 background-color #f00.red.rgb(255,0,0) 设置背 ...

随机推荐

  1. Java实现寻找最小的k个数

    1 问题描述 有n个整数,请找出其中最小的k个数,要求时间复杂度尽可能低. 2 解决方案 2.1 全部排序法 先对这n个整数进行快速排序,在依次输出前k个数. package com.liuzhen. ...

  2. Java实现大整数乘法

    1 问题描述 计算两个大整数相乘的结果. 2 解决方案 2.1 蛮力法 package com.liuzhen.chapter5; import java.math.BigInteger; publi ...

  3. java算法集训结果填空题练习1

    1 空瓶换汽水 浪费可耻,节约光荣.饮料店节日搞活动:不用付费,用3个某饮料的空瓶就可以换一瓶该饮料.刚好小明前两天买了2瓶该饮料喝完了,瓶子还在.他耍了个小聪明,向老板借了一个空瓶,凑成3个,换了一 ...

  4. 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 ...

  5. python—socket编程

    一:客户端/服务器 架构 1.硬件C/S架构:(例如,打印机) 2.软件C/S架构:互联网中处处是C/S架构 腾讯作为服务端为你提供视频,你得下个腾讯视频客户端才能看它的视频 C/S架构与socket ...

  6. list基本运用

    #include<iostream> #include<list> using namespace std; list<int>list1,list2; void ...

  7. mysql中的四种常用的引擎

    MySQL常用的引擎有:InnoDB存储引擎.MyISAM存储引擎.MEMORY存储引擎.Archive存储引擎 InnoDB存储引擎 InnoDB是事务型数据库的首选引擎,支持事务安全表(ACID) ...

  8. 如何知道使用的GatewayWorker版本号?

    打开GatewayWorker/Gateway.php, 在Gateway类内部VERSION常量标记了当前GatewayWorker的版本,例如下面GatewayWorker版本号为2.0.2. e ...

  9. 64位手机无法加载x5(libmttwebview.so is 32-bit instead of 64-bit)

    x5内核暂时不提供64位的so文件,在64位手机上需要让AP以32位模式运行. 具体操作如下: 1.如果使用是Eclipse则需要将所有的.so文件都放置在so加载目录:lib/armeabi文件夹下 ...

  10. 在SpringMVC获取客户端传递的数据的方式

    在处理请求的方法中,加入相对应的形参,保证形参参数名和传递的数据的参数名保持一致,就能够自动赋值 value:当不满足赋值条件时,可以使用value属性,指定映射关系 required:设置形参是否必 ...