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开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如 ...
随机推荐
- JS 根据字节 截取字符串函数
function reBytesStr(str, len) { if ((!str && typeof(str) != 'undefined')) {return '';} var n ...
- MSSQL 索引
INCLUDE索引作用:减少 key lookup所带来的性能开销. 效率主要体现在覆盖查询(建的索引为覆盖索引),在查询时把SELECT显示列放在INCLUDE里作为非索引健列,不用于查询只显示在结 ...
- MSF魔鬼训练营-5.3 MS08-067安全漏洞实战
msf > search ms08_067 Matching Modules ================ Name D ...
- MSF魔鬼训练营-3.5.4Nmap与渗透测试数据库
MSF中可以直接使用db_nmap,它是namp的一个封装与NMAP用法完全一致.其执行结果会自动导入至数据库中. 当然也可以在使用 nmap 的 -oX参数输出一个XML格式的文件.这可以是你在本机 ...
- jenkins自动化部署springboot
一.linux按jar包名称部署 1.执行shell PID=$(ps -ef | grep app.jar | grep -v grep | awk '{ print $2 }') if [ -z ...
- [转帖]Linux /tmp目录下执行脚本失败提示Permission denied
Linux /tmp目录下执行脚本失败提示Permission denied https://www.cnblogs.com/linyfeng/p/11087655.html 国产化的环境上 就有一个 ...
- linux centos7.3安装lnmp，nginx-1.11.12 ,php7.0.2 ,
#更新源 yum -y update #添加用户和组 adduser www groupadd www usermod -G www www #初始化目录 mkdir -p /data/app/php ...
- LeetCode题解： LRU Cache 缓存设计
LeetCode题解: LRU Cache 缓存设计 2014年12月10日 08:54:16 邴越 阅读数 1101更多 分类专栏: LeetCode 版权声明:本文为博主原创文章,遵循CC 4 ...
- python字典保存至json文件
import os import json class SaveJson(object): def save_file(self, path, item): # 先将字典对象转化为可写入文本的字符串 ...
- upupw ： Apache Php5.5 的使用
1. 官网下载 1. 官网下载 apache php5.5点击下载 但是 现在有时候打不开,所以提供以下方法 2. 百度云网盘下载 https://pan.baidu.com/s/1eQ2k1Su ...