㈠实现不等宽背景条纹

 

实现如上图所示的效果，代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style type="text/css">

       .cont{

                width: 500px;

                height: 200px;

                background: -webkit-linear-gradient(#78C9DC 70%, #0acfff 0%);

                background: -o-linear-gradient(#78C9DC 70%, #0acfff 0%);

                background: linear-gradient(#78C9DC 70%, #0acfff 0%);

               background-size: 100%  20px;

       }

     </style>

     <title>条纹背景</title>

 </head>

 <body>

     <div class="cont">

     </div>

 </body>

 </html>

 

其他效果：

⑴如果想设置等宽的渐变只需要将开始值和结束值改为互补

⑵如果需要等宽切无过渡的渐变，开始和结束值设置为50%即可。

⑶如果想要垂直条纹，你只需要调整background-size的x、y值即可。

 

㈡瓷砖条纹背景

实现如上图所示的效果，代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style type="text/css">

      .cont{

               width:500px;

               height:200px;

               background:-webkit-linear-gradient(bottom left, #1E90FF 50%, #98FB98 50%);

               background:-o-linear-gradient(bottom left, #1E90FF 50%, #98FB98 50%);

               background:linear-gradient(to top right, #1E90FF 50%, #98FB98 50%);

               background-size:30px 30px;

      }

     </style>

     <title>瓷砖条纹背景</title>

 </head>

 <body>

     <div class="cont">

     </div>

 </body>

 </html>

 

㈢草地背景

实现如上图所示的效果，代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style type="text/css">

       .cont{

               width:500px;

               height:200px;

              background:linear-gradient(-45deg,#0acf00 50%,#78C9DB 50%);

              background-size:30px 100%;

         }

     </style>

     <title>草地背景</title>

 </head>

 <body>

     <div class="cont">

     </div>

 </body>

 </html>

 

㈣斜条纹背景

实现如上图所示的效果，代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style type="text/css">

 .cont{

 width:500px;

 height:200px;

 background:repeating-linear-gradient(-45deg,#ADFF2F,#ADFF2F 15px,#D2691E 0,#D2691E 30px);

 /*background:repeating-linear-gradient(-45deg,#0acf00,#0acf00 15px,#78C9DB 0,#78C9DB 30px);*/效果相同 

 background-size: 30px 30px;

 }

     </style>

     <title>斜条纹背景</title>

 </head>

 <body>

     <div class="cont">

     </div>

 </body>

 </html>

 

另一种条纹效果：

 

实现如上图所示的效果，代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style type="text/css">

 .cont{

          width:500px;

          height:200px;

          background:repeating-linear-gradient(-45deg,#FA8072,#FA8072 15px,#ADD8E6 0,#ADD8E6 30px);

          background-size: 30px 30px;

      }

     </style>

     <title>斜条纹背景</title>

 </head>

 <body>

     <div class="cont">

     </div>

 </body>

 </html>

 

㈤单色斜条纹背景（利用透明度及transparent）

实现如上图所示的效果，代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style type="text/css">

     .cont{

           width:500px;

           height:200px;

           background:#fff repeating-linear-gradient(30deg,rgba(0,0,0,.5),rgba(0,0,0,.5)15px,transparent 0,transparent 30px);

      }

     </style>

     <title>单色斜条纹背景（利用透明度及transparent）</title>

 </head>

 <body>

     <div class="cont">

     </div>

 </body>

 </html>

 

㈥格子衫背景

实现如上图所示的效果，代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style type="text/css">

     .cont{

              width:500px;

              height:200px;

              background:#fff;

              background: linear-gradient(90deg,rgba(100,0,0,.5) 50%,transparent 0),linear-gradient(rgba(100,0,0,.5) 50%,transparent 0);

              background-size: 30px 30px;

      }

     </style>

     <title>格子衫背景</title>

 </head>

 <body>

     <div class="cont">

     </div>

 </body>

 </html>

 

㈦波点背景

 

实现如上图所示的效果，代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style type="text/css">

    .cont{

              margin:50px;

              width:500px;

              height:200px;

              background:#C71585;

              background-image:radial-gradient(#fff 30%,transparent 0),radial-gradient(#fff 30%,transparent 0);

              background-size:20px 20px;

              background-position:0 0,10px 10px;  // 必须是background-size尺寸的1/2

          }

     </style>

     <title>波点背景</title>

 </head>

 <body>

     <div class="cont">

     </div>

 </body>

 </html>

 

㈧棋盘背景

 

实现如上图所示的效果，代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style type="text/css">

  .cont{

          width:500px;

          height:200px;

          background: #fff;

          background-image:linear-gradient(45deg,#FF7F50  26%,transparent 0,transparent 75%,#FF7F50  0),

          linear-gradient(45deg,#FF7F50  26%,transparent 0,transparent 75%,#FF7F50 0);

          background-size:30px 30px;

          background-position:0 0,15px 15px;

      }

     </style>

     <title>棋盘背景</title>

 </head>

 <body>

     <div class="cont">

     </div>

 </body>

 </html>

 

参考：https://www.php.cn/css-tutorial-389447.html

          https://www.jb51.net/css/464750.html

           以上就是css做的条纹背景，希望有所帮助。 

CSS3做出条纹大背景的更多相关文章

  1. css3实现条纹背景

    <!DOCTYPE HTML><html><head><meta charset='utf-8'/><meta forua="true& ...

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

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

  3. CSS3 斑马条纹.html

    hvkhujluhijo hvkhujluhijo hvkhujluhijo hvkhujluhijo hvkhujluhijo <!DOCTYPE html> <html> ...

  4. CSS3知识点整理&&一些demo

    css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出         http://codepen ...

  5. 利用CSS3选择器定制checkbox和radio

    之前在一个项目中需要定制checkbox,于是乎用图片模拟了一下,之后发现个更好用的方法(*因为兼容问题 在移动开发中用用就好) 效果: 1 2 3 4 5 6 7 实现代码: <style t ...

  6. CSS3实现三角形和对话框

    这是最终实现的效果,类似于微信对话框的样式. 分析一下这个对话框的结构,由一个小三角形和一个长方形构成.长方形很容易就可以实现,重点是如何用CSS3做出一个小三角形. 一.如何生成一个三角形  总结: ...

  7. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  8. 拥有的50个CSS代码片段(上)

    1. CSS 重置 ;;;font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-box-si ...

  9. 10款让WEB前端开发人员更轻松的实用工具

    这篇文章介绍10款让Web前端开发人员生活更轻松的实用工具.每个Web开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如 ...

随机推荐

  1. Reactor系列(十二)window嵌套

    #java#reactor#flux#window# Flux嵌套 视频解说: https://www.bilibili.com/video/av80458406/ FluxMonoTestCase. ...

  2. Construct String from Binary Tree

    You need to construct a string consists of parenthesis and integers from a binary tree with the preo ...

  3. Maven下载安装测试

    一.Maven下载 在Maven官网下载压缩包 二.安装 解压后目录如下 bin目录包含mvn的运行脚本 boot目录包含一个类加载器的框架,加载自己的类库 conf是配置文件目录 lib目录包含一些 ...

  4. [BZOJ 3117] [NOI1999]内存分配(STL)

    [BZOJ 3117] [NOI1999]内存分配(STL) 题面 内存是计算机重要的资源之一,程序运行的过程中必须对内存进行分配. 经典的内存分配过程是这样进行的: 1.内存以内存单元为基本单位,每 ...

  5. sql server lower函数

    lower()函数 --将大写字符数据转换为小写字符数据 语法:lower(character_expression) --character_expression是指定要进行转换的字符串

  6. Python 东方财富网-股市行情数据抓取

    东方财富网 股市行情数据抓取: http://quote.eastmoney.com/center/gridlist.html#hs_a_board 请求数据未入库处理,其中数据只存入数据文本,未做存 ...

  7. python内置函数简单归纳

    做python小项目的时候发现熟练运用python内置函数,可以节省很多的时间,在这里整理一下,便于以后学习或者工作的时候查看.函数的参数可以在pycharm中ctrl+p查看. 1.abs(x):返 ...

  8. luogu P3620 [APIO/CTSC 2007]数据备份

    luogu 首先如果一条线不是了连接的相邻两个位置一定不优,把它拆成若干连接相邻位置的线.所以现在问题是有\(n\)个物品,选\(k\)个,要求选的位置不能相邻,求最小总和 如果没有选的位置不能相邻这 ...

  9. vue--微信支付

    1.当前页面没有注册: 需要登录微信支付商家后台,添加支付路径授权 2.安装 weixin-js-sdk 微信SDK npm install weixin-js-sdk --save 3.引入 imp ...

  10. 把两个object对象合并成一个对象 属性名称相同的变为后面对象的值

    object.assign(from,obj)------object.assign(目标对象,被合并的对象)