css条纹背景
一、 水平条纹
1. 两种颜色:
html
<div class="stripe"></div>
css
.stripe{
width: 250px;
height: 150px;
margin: 50px;
background: linear-gradient(#fb3 50%,#58a 50%);
background-size: 100% 30px;
}
效果图
2. 不等宽的条纹背景
css
.stripe{
width: 250px;
height: 150px;
margin: 50px;
background: linear-gradient(#fb3 40%,#58a 0);
background-size: 100% 30px;
}
效果图
3. 三列条纹背景
css
.stripe{
width: 250px;
height: 150px;
margin: 50px;
background: linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6%,deeppink 0);
background-size: 100% 30px;
}
效果图
二、垂直条纹
css
.stripe{
width: 250px;
height: 150px;
margin: 50px;
background: linear-gradient(to right,#fb3 33.3%,#58a 0,#58a 66.6%,deeppink 0);/*或者90deg*/
background-size: 30px 100%;
}
效果图
三、斜向条纹
1. 45度角的斜向条纹
css
.stripe{
width: 250px;
height: 150px;
margin: 50px;
background: linear-gradient(45deg,#fb3 25%,#58a 0,
#58a 50%,#fb3 0,
#fb3 75%,#58a 0);
background-size: 30px 30px;
}
效果图
2. 其他角度的斜向条纹
css
.stripe{
width: 250px;
height: 150px;
margin: 50px;
background: repeating-linear-gradient(120deg,#fb3 0,#fb3 15px,#58a 0,#58a 30px);
}
效果图
说明:黄色条纹从0到15px线性渐变,蓝色条纹从15px到30px线性渐变。
四、结合半透明实现同色系条纹
css
.stripe{
width: 250px;
height: 150px;
margin: 50px;
background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,
transparent 0,transparent 30px);
background: #58a;
}
参考网址https://www.w3cplus.com/css3/do-you-really-understand-css-linear-gradients.html
https://www.w3cplus.com/content/css3-background-size
css条纹背景的更多相关文章
- css条纹背景样式、及方格斜纹背景的实现
一.横向条纹如下代码: background: linear-gradient(#fb3 %, #58a %) 上面代码表示整个图片的上部分20%和下部分20%是对应的纯色,只有中间的部分是渐变色.如 ...
- css 条纹背景
先介绍文章用到的二个知识点 background-size 属性 语法 background-size: length|percentage|cover|contain; css线性渐变 linear ...
- CSS 条纹背景深入
一.水平渐变 实现水平条纹很简单 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 用css实现条纹背景
我先额外的说一下怎么用CSS绘制三角形: 绘制三角形是把边框加粗,将元素的宽高都设为0,让其余的边框颜色透明,下面我们来看实现的代码: 先把边框的颜色设置成不同颜色: #div{ border-col ...
- CSS揭秘 技巧(五):条纹背景
条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...
- [css 揭秘] :CSS揭秘 技巧(五):条纹背景
条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...
- 利用CCS3渐变实现条纹背景
本文摘自<CSS揭秘>中国工信出版集团 难题: 不论是在网页设计中,还是在其他传统媒介中(比如杂志和墙纸等),各种尺寸.颜色.角度的条纹图案在视觉设计中无处不在.要想在网页中实现条纹图案, ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- CSS 设置背景透明度,不影响子元素
由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素. 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...
随机推荐
- day10、nfs+rsync全网备份及实时同步
题目要求 注意:博主使用的系统为: [root@web01 ~]# uname -a Linux web01 2.6.32-696.el6.x86_64 #1 SMP Tue Mar 21 19:29 ...
- Java开发小技巧(四):配置文件敏感信息处理
前言 不知道在上一篇文章中你有没有发现,jdbc.properties中的数据库密码配置是这样写的: jdbc.password=5EF28C5A9A0CE86C2D231A526ED5B388 其实 ...
- Docker for Windows 使用入门
欢迎来到Docker for Windows! Docker是用于创建Docker应用程序的完整开发平台,Docker for Windows是在Windows系统上开始使用Docker的最佳方式. ...
- Myeclipse Reload
前言: 在用 myeclipse 做项目开发的时候.如果没有配置热部署,平凡的去启动 server 如果项目小,那么很简单.如果项目很大,那么重启的项目花费的时间会很长. 在 myeclipse 中其 ...
- www.netcraft.com查看站点服务器使用的是什么操作系统
查看站点服务器使用的是什么操作系统
- jemeter工作台设置
工作台的设置 1.创建一个线程组 创建一个http代理服务器:工作台-->添加-->非测试元件-->http代理服务器 设置参照下图,要录制的时候点击启动 2.设置IE浏览器 IE- ...
- cocoapods使用 swift注意事项
版权声明:本文为博主原创文章,未经博主允许不得转载. 说明:2015年12月2日更新,增加一个可能遇到的问题,优化排版.使用CocoaPods过程中遇到问题,欢迎评论交流. 一.CocoaPods的安 ...
- SQL Server AlwaysOn添加监听器失败
标签:MSSQL/ 一.错误描述 1.群集服务未能使群集服务或应用程序“Alwayson22”完全联机或脱机.一个或多个资源可能处于失败状态.这可能会影响群集服务或应用程序的可用性 2.群集服务中的群 ...
- GVIM与模板——让FPGA开发变得更简单
还在使用FPGA开发环境自带的代码编辑器?还在逐个字母敲击冗长重复的代码?明德扬至简设计法让你快速提高代码编写效率!利用GVIM这一高效的编辑工具并添加自定义模板,通过简短的脚本命令即可自动生成所有常 ...
- react native仿微信性别选择-自定义弹出框
简述 要实现微信性别选择需要使用两部分的技术: 第一.是自定义弹出框: 第二.单选框控件使用: 效果 实现 一.配置弹出框 弹出框用的是:react-native-popup-dialog(Git地址 ...