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开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如 ...
随机推荐
- SpringSecurity 配置
SpringSecurity+JWT https://www.jianshu.com/p/5b9f1f4de88d https://blog.csdn.net/qq_35494808/article/ ...
- WIN32_FIND_DATA
基本信息 编辑 关于文件的全部属性信息.总计有以下以下9种:文件的标题名.文件的属性(只读.存档,隐藏等).文件的创建时间.文件的最后访问时间.文件的最后修改时间.文件大小的高位双字.文件大小的低位双 ...
- （5.1）mysql高可用系列——高可用架构方案概述
关键词:mysql高可用概述,mysql高可用架构 常用高可用方案 20190918 现在业内常用的MySQL高可用方案有哪些?目前来说,用的比较多的开源方案分内置高可用与外部实现,内置高可用有如下: ...
- 小菜鸟之oracle数据字典
oracle数据字典 一.数据字典 数据字典是oracle存放有关数据库信息的地方,几乎所有的系统信息和对象信息都可在数据字典中进行查询.数据字典是oracle数据库系统的信息核心,它是一组提供有关数 ...
- java-selenium上传
一.sendkeys()上传 HTML源码 <td>sendkeys上传</td> <div id='pf'><input type='file' id='p ...
- POJ - 1815 Friendship (最小点割集）
(点击此处查看原题) 题目分析 题意:有n个人,编号记为1~n,n个人之间可能有人可以互相联系,如果A能和B联系,那么至少满足这两种情况之一:(1)A知道B的电话(2)A可以和C联系,并且C可以和B联 ...
- 安装Python环境
首先我们来安装Python,Python3.5+以上即可 1.首先进入网站下载:点击打开链接(或自己输入网址https://www.python.org/downloads/),进入之后如下图,选择图 ...
- Codeforces 1221E. Game With String
传送门 首先每一段连续的 $...$ 都是互不影响的,所以可以一段段考虑 考虑最简单的情况,此时每一段都大于等于 $a$ 并且小于 $2b$ ,那么每一段都只能放一次,胜负直接根据段数即可得到答案 考 ...
- IntelliJ IDEA 复杂的重构技巧
IntelliJ IDEA 复杂的重构技巧(二) 转载 上次我说了一些 "复杂的重构技巧" ,讲的是一些使用 IntelliJ 的简单功能实现复杂的重构需求的技巧. 看到大家的反响 ...
- Java后端技术面试汇总(第四套)
1.Java基础 • 为什么JVM调优经常会将-Xms和-Xmx参数设置成一样:• Java线程池的核心属性以及处理流程:• Java内存模型,方法区存什么:• CMS垃圾回收过程:• Full GC ...