CSS3做出条纹大背景

㈠实现不等宽背景条纹

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <style type="text/css">
 6       .cont{
 7
 8                width: 500px;
 9
10                height: 200px;
11
12                background: -webkit-linear-gradient(#78C9DC 70%, #0acfff 0%);
13                background: -o-linear-gradient(#78C9DC 70%, #0acfff 0%);
14                background: linear-gradient(#78C9DC 70%, #0acfff 0%);
15
16               background-size: 100%  20px;
17
18       }
19     </style>
20     <title>条纹背景</title>
21 </head>
22 <body>
23     <div class="cont">
24
25     </div>
26 </body>
27 </html>

其他效果：

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

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

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

㈡瓷砖条纹背景

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <style type="text/css">
 6      .cont{
 7
 8               width:500px;
 9
10               height:200px;
11
12               background:-webkit-linear-gradient(bottom left, #1E90FF 50%, #98FB98 50%);
13               background:-o-linear-gradient(bottom left, #1E90FF 50%, #98FB98 50%);
14               background:linear-gradient(to top right, #1E90FF 50%, #98FB98 50%);
15
16               background-size:30px 30px;
17
18      }
19     </style>
20     <title>瓷砖条纹背景</title>
21 </head>
22 <body>
23     <div class="cont">
24
25     </div>
26 </body>
27 </html>

㈢草地背景

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <style type="text/css">
 6       .cont{
 7
 8               width:500px;
 9
10               height:200px;
11
12              background:linear-gradient(-45deg,#0acf00 50%,#78C9DB 50%);
13
14              background-size:30px 100%;
15
16         }
17     </style>
18     <title>草地背景</title>
19 </head>
20 <body>
21     <div class="cont">
22
23     </div>
24 </body>
25 </html>

㈣斜条纹背景

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <style type="text/css">
 6 .cont{
 7
 8 width:500px;
 9
10 height:200px;
11
12 background:repeating-linear-gradient(-45deg,#ADFF2F,#ADFF2F 15px,#D2691E 0,#D2691E 30px);
13
14 /*background:repeating-linear-gradient(-45deg,#0acf00,#0acf00 15px,#78C9DB 0,#78C9DB 30px);*/效果相同
15
16 background-size: 30px 30px;
17
18 }
19     </style>
20     <title>斜条纹背景</title>
21 </head>
22 <body>
23     <div class="cont">
24
25     </div>
26 </body>
27 </html>

另一种条纹效果：

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <style type="text/css">
 6 .cont{
 7
 8          width:500px;
 9
10          height:200px;
11
12          background:repeating-linear-gradient(-45deg,#FA8072,#FA8072 15px,#ADD8E6 0,#ADD8E6 30px);
13
14          background-size: 30px 30px;
15
16      }
17     </style>
18     <title>斜条纹背景</title>
19 </head>
20 <body>
21     <div class="cont">
22
23     </div>
24 </body>
25 </html>

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

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <style type="text/css">
 6     .cont{
 7
 8           width:500px;
 9
10           height:200px;
11
12           background:#fff repeating-linear-gradient(30deg,rgba(0,0,0,.5),rgba(0,0,0,.5)15px,transparent 0,transparent 30px);
13
14      }
15
16     </style>
17     <title>单色斜条纹背景（利用透明度及transparent）</title>
18 </head>
19 <body>
20     <div class="cont">
21
22     </div>
23 </body>
24 </html>

㈥格子衫背景

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <style type="text/css">
 6     .cont{
 7
 8              width:500px;
 9
10              height:200px;
11
12              background:#fff;
13
14              background: linear-gradient(90deg,rgba(100,0,0,.5) 50%,transparent 0),linear-gradient(rgba(100,0,0,.5) 50%,transparent 0);
15
16              background-size: 30px 30px;
17
18      }
19     </style>
20     <title>格子衫背景</title>
21 </head>
22 <body>
23     <div class="cont">
24
25     </div>
26 </body>
27 </html>

㈦波点背景

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <style type="text/css">
 6    .cont{
 7
 8              margin:50px;
 9
10              width:500px;
11
12              height:200px;
13
14              background:#C71585;
15
16              background-image:radial-gradient(#fff 30%,transparent 0),radial-gradient(#fff 30%,transparent 0);
17
18              background-size:20px 20px;
19
20              background-position:0 0,10px 10px;  // 必须是background-size尺寸的1/2
21
22          }
23     </style>
24     <title>波点背景</title>
25 </head>
26 <body>
27     <div class="cont">
28
29     </div>
30 </body>
31 </html>

㈧棋盘背景

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <style type="text/css">
 6  .cont{
 7
 8          width:500px;
 9
10          height:200px;
11
12          background: #fff;
13
14          background-image:linear-gradient(45deg,#FF7F50  26%,transparent 0,transparent 75%,#FF7F50  0),
15
16          linear-gradient(45deg,#FF7F50  26%,transparent 0,transparent 75%,#FF7F50 0);
17
18          background-size:30px 30px;
19
20          background-position:0 0,15px 15px;
21
22      }
23     </style>
24     <title>棋盘背景</title>
25 </head>
26 <body>
27     <div class="cont">
28
29     </div>
30 </body>
31 </html>

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

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

原文地址：https://www.cnblogs.com/shihaiying/p/11354097.html

时间： 2024-10-14 10:34:17

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

JavaScript 和 CSS3 做出转盘抽奖效果

首先是HTML代码 <p id="text">您还剩余3次机会</p> <div class="box"> <img src="./img/lanren.png" > <div class="btn btn1"></div> <div class="btn2 btn"></div> </div> 然后

hvkhujluhijo hvkhujluhijo hvkhujluhijo hvkhujluhijo hvkhujluhijo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> tbody tr:nth-child(odd) {display: inline-block;padding: 10px

CSS3知识点整理&&一些demo

css3能做什么响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出 http://codepen.io/airen/pen/icFba 如果大家感兴趣,大家可以去慕课网上找大漠老师的课学习. 边框 1.圆角效果 border-radius:border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角.右上角.右下角和左下角,顺时针 */ bord

CSS3实现三角形和对话框

这是最终实现的效果,类似于微信对话框的样式. 分析一下这个对话框的结构,由一个小三角形和一个长方形构成.长方形很容易就可以实现,重点是如何用CSS3做出一个小三角形. 一.如何生成一个三角形总结:三角形是由设置宽度高度为0,由边框构成的正方形,分别设置边框四个边的样式,得到四个三角形拼凑在一起的效果,再设置其他方向上的边框颜色为透明色. 1.首先先做一个正方形,这个正方形不是一般的元素加上背景颜色实现的,而是对一个元素将其长和宽都设置0px,这样就相当于盒子的内容区消失.content:"

【转】十款让 Web 前端开发人员更轻松的实用工具

这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具.每个 Web 开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如果下面这些工具对于你来说都是新的领域,那么这篇文章是非常有用的,因为这些实用的工具将让你的工作更有效率. Spritepad 借助 SpritePad,你可以在几分钟甚至几秒钟内创建你的 CSS 精灵.只需拖放您的图片,立即可以生成 PNG 精灵图片以及 CSS 代码.不需要在 Photosh

坦克大战（一）

坦克大战(一) 相信大家对坦克大战都不陌生,并且网上也有很多用java实现的小程序,最近用了几天时间将其使用javaScript语言通过面向对象的方式实现,在实现的过程中吸收了很多新的知识,现在趁着程序即将完成之际将其记录下来. 废话不多说,先上程序源码:https://github.com/safemen/TankGame2.0.git 项目需求在写程序之前,我们需要先大体的了解一下项目的一些需求和注意事项,方便以后的开发. 程序在运行之前会有从下到上的开场动画,然后鼠标点击选择游戏的人数,

CSS的50个代码片段

1.css全局 Html代码 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center

《前端圈技术论坛-腾讯互娱专场》观后感

11月22日,周六,天气晴朗,原计划今天和阿武去参加前端圈技术论坛深圳专场,可是我要加班,吃完午饭阿武发来一张现场图片,用的还是周四羽毛球赛的冠军奖品——一个手机鱼眼镜头拍摄的,同事阿王问我这是什么活动,得知我已报名后,当即让我放下工作赶过去参加,好在活动现场就在隔壁大楼C1-18F,于是才有了这篇观后感. 整体来说这次专场比上次的iweb峰会质量高一些,干货比较多.本次论坛主要内容有: 1.TGideas副总监PANTHER致辞由于去的晚了点,没有赶上. 2.TGideas重构四组(重构工程

每位设计师都应该拥有的50个CSS代码片段

http://www.oschina.net/translate/css-snippets-for-designers?from=20130613 面对每年如此多的新趋势 ,保持行业的领先是个很困难问题. 网站设计者和前端工程师都已经全面的使用 CSS3 properties, 决定这些的是浏览器支持和新的特性. 但是还是有些优秀的CSS2代码片段和CSS3一起运行中. 这篇文字里我会介绍 50 个便于使用的 CSS2/CSS3 代码片段给所有的WEB专业人员. 选择IDE开发环境来存储