CSS3做出条纹大背景
㈠实现不等宽背景条纹
实现如上图所示的效果，代码如下：
<!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做出条纹大背景的更多相关文章
- css3实现条纹背景
<!DOCTYPE HTML><html><head><meta charset='utf-8'/><meta forua="true& ...
- css3实现条纹以及方格斜纹背景
CSS代码: .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 5 ...
- CSS3 斑马条纹.html
hvkhujluhijo hvkhujluhijo hvkhujluhijo hvkhujluhijo hvkhujluhijo <!DOCTYPE html> <html> ...
- CSS3知识点整理&&一些demo
css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出 http://codepen ...
- 利用CSS3选择器定制checkbox和radio
之前在一个项目中需要定制checkbox,于是乎用图片模拟了一下,之后发现个更好用的方法(*因为兼容问题 在移动开发中用用就好) 效果: 1 2 3 4 5 6 7 实现代码: <style t ...
- CSS3实现三角形和对话框
这是最终实现的效果,类似于微信对话框的样式. 分析一下这个对话框的结构,由一个小三角形和一个长方形构成.长方形很容易就可以实现,重点是如何用CSS3做出一个小三角形. 一.如何生成一个三角形 总结: ...
- 这可能是史上最全的CSS自适应布局总结教程
标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...
- 拥有的50个CSS代码片段(上)
1. CSS 重置 ;;;font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-box-si ...
- 10款让WEB前端开发人员更轻松的实用工具
这篇文章介绍10款让Web前端开发人员生活更轻松的实用工具.每个Web开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如 ...
随机推荐
- unzip 命令
NAME unzip - list, test and extract compressed files in a ZIP archive SYNOPSIS unzip [-Z] [-cflptTuv ...
- [xpath] 定位中starts-with、contains和text()的用法
starts-with 顾名思义,匹配一个属性开始位置的关键字 contains 匹配一个属性值中包含的字符串 text() 匹配的是显示文本信息,此处也可以用来做定位用 eg //input[sta ...
- 【洛谷P1816】忠诚——ST表做法
看了两个小时RMQ并位运算,对二进制勉勉强强有了个初步了解,不能说精通(可能今年CSP前都做不到精通),但是记熟板子做做题还是没有问题的 以下是正式题解,相信你看过了题目,我介绍的是ST表的做法(很简 ...
- C++学习 之 控制程序流程 （笔记）
1.使用if...else有条件的执行 在一些时候语句需要进行有条件的执行.比如如果输入"Y"就执行赋值语句N=1:否则N=0: #include<iostream> ...
- # N数码问题
N数码问题 首先,先贯彻一个理念.奇偶性很神奇,对于一类问题,如果属于同种性质(奇偶性相同),那么它们就是完全相同(这个在某种意义上说)的,,一些问题如果奇偶性相同那么里面涉及的问题都是等价的. 数码 ...
- mysql添加索引造成的影响
尽管添加索引可以优化SQL语句的性能,但是添加索引的同时也会带来不小的开销.尤其是在有大量的索引的情况下. mysql添加索引造成的影响如下: 1.DML(数据操作语言)影响,在表上添加缩影会直接影响 ...
- 公司SQL考核及小结（Oracle）
一.数据库初始化脚本: Create TABLE HAND_CUSTOMERS ( CUSTOMERS_NO ), CUSTOMERS_NAME ), CUSTOMERS_GENDER ), CUST ...
- sql server if else
DECLARE IF (@sex = '1')BEGIN PRINT '2'END ELSE BEGIN PRINT(1) END begin... end可以省略 declare @sex int ...
- arcgisJs之底图切换插件
arcgisJs之底图切换插件 底图切换插件在arcgis中有两种表现,如下: 1.两张底图切换 2.多张底图切换 一.两张地图切换 let basemapToggle = new BasemapTo ...
- ubuntu终端安装最新ss
有时候因为加密方式比较新,比如aes-256-gcm,导致旧版本的不能用 一句命令安装ss最新版本 aes-256-gcm加密方式可以用,没毛病