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开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如 ...
随机推荐
- SpringMVC必备知识点汇总
1.参数接收 1.1 数组 1.2 文件上传 1.2.1 单个文件上传 1.2.2 多个文件上传 1.2.3 文件上传时,携带其他数据 2.参数校验 参数校验:https://www.cnblogs. ...
- Visual Basic 中读取逗号分隔的文本文件
TextFieldParser 对象提供一种可以轻松而高效地分析结构化文本文件(如日志)的方法. TextFieldType 属性用于定义文件是带分隔符的文件还是具有固定宽度文本字段的文件. Dim ...
- 多标签分类(multi-label classification)综述
意义 网络新闻往往含有丰富的语义,一篇文章既可以属于“经济”也可以属于“文化”.给网络新闻打多标签可以更好地反应文章的真实意义,方便日后的分类和使用. 难点 (1)类标数量不确定,有些样本可能只有一个 ...
- Elasticsearch-如何识别一篇文档
ES-识别文档 为了识别同一个索引中的某篇文档,ES使用_uid中的文档类型和ID结合体._uid字段是由_id和_type字段组成,当搜索或者检索文档的时候总是能获得这两项信息. FengZhend ...
- luogu P3320 [SDOI2015]寻宝游戏
大意:给定树, 要求维护一个集合, 支持增删点, 询问从集合中任取一点作为起点, 遍历完其他点后原路返回的最短长度. 集合中的点按$dfs$序排列后, 最短距离就为$dis(s_1,s_2)+...+ ...
- luogu P4365 [九省联考2018]秘密袭击coat
luogu 这里不妨考虑每个点的贡献,即求出每个点在多少个联通块中为第\(k\)大的(这里权值相同的可以按任意顺序排大小),然后答案为所有点权值\(*\)上面求的东西之和 把比这个点大的点看成\(1\ ...
- Vue-cli脚手架起步
1.安装node.js 下载地址:http://nodejs.cn/download/ 测试是否安装成功 node -V 检测安装包 npm -v 检测npm 2.安装webpack npm inst ...
- openlayers之点，线，面(以城市，河流，省份为例，分别对应点线面)
kpst._this这里指向初始化的map // 设置标注样式函数 function createStyle(name) { // 河流style var riverStyle = new Style ...
- java的移位和异或运算
Java移位运算种类 基础:我们知道在Java中int类型占32位,可以表示一个正数,也可以表示一个负数.正数换算成二进制后的最高位为0,负数的二进制最高为为1 例子: -5换算成二进制后为:1111 ...
- 搭建私有CA并基于OpenSSL实现双向身份认证
0x00 前言 互联网上的Web应用由于用户数目广泛,都是采用单向身份认证的,只需要客户端验证服务端的身份.但如果是企业内部的应用对接,客户端数量有限,可能就会要求对客户端也做身份验证,这时就需要一个 ...