有趣的CSS3背景 斜条纹

今天逛的时候发现了一个有趣的css3实现的背景效果,代码实现
.noaccess {
position: absolute;
width: 300px;
height: 100px;
z-index:;
background-color: #999;
opacity: .5;
top:;
bottom:;
display: block;
background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,.2)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,.2)),color-stop(0.75,rgba(255,255,255,.2)),color-stop(0.75,transparent),to(transparent));
/* background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent); */
background-image: -moz-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
background-image: -o-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
/* background-image: linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent); */
-webkit-background-size: 32px 32px;
-moz-background-size: 32px 32px;
-o-background-size: 32px 32px;
background-size: 32px 32px;
}
有趣的CSS3背景 斜条纹的更多相关文章
- 发现两个有趣的CSS3效果
一.CSS3画机器猫 http://keleyi.com/keleyi/phtml/html5/3.htm 哆啦A梦效果图: 可用于浏览器对CSS3支持情况的测试 但最近有人对这个测试表示怀疑,指该测 ...
- CSS3背景温故
1.背景的五种基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示方式)background-attachm ...
- css3 背景记
css3 背景 css背景主要包括五个属性: background-color background-color:transparent || <color> 用来设置元素的背景颜色,默认 ...
- CSS自学笔记(11):CSS3背景和边框
CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...
- 第七十九,CSS3背景渐变效果
CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一.线性渐变 linear-gradi ...
- 从零开始学习前端开发 — 17、CSS3背景与渐变
一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...
- css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+
css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...
- [转]真正了解CSS3背景下的@font face规则
本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...
- css3 背景background
Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...
随机推荐
- thymeleaf 格式化时间
运用Thymeleaf模板后,前台的时间显示发生变化,和数据库不一致 HTML页面中格式如下: <td th:text="${fleeceRecord.cashmereDate}&qu ...
- mysql中如何使用一句话将一个表的数据导入到另一个表中:insert into ...select
INSERT INTO cdcd2015(`filename`,`xmlfile`,`updatetime`,`isDel`) SELECT `filename`,`xmlfile`,`updatet ...
- Lucene/Solr企业级搜索学习资源
Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过Http GSol ...
- 在Qt(C++)中与Python混合编程
一.PythonQt库 在Qt(C++)中与Python混合编程,可以使用PythonQt库. 网站首页:http://pythonqt.sourceforge.net 下载页面:https://so ...
- hdu 5418 (Floyd+哈密顿) 飞向世界
http://acm.hdu.edu.cn/showproblem.php?pid=5418 题目大意是城市的编号是1到n,给出m条路线,表示从a城市飞到b城市飞机要耗多少油,最后问飞机从1出发飞过所 ...
- SSH原理与运用(一):远程登录(转)
作者: 阮一峰 日期: 2011年12月21日 SSH是每一台Linux电脑的标准配置. 随着Linux设备从电脑逐渐扩展到手机.外设和家用电器,SSH的使用范围也越来越广.不仅程序员离不开它,很 ...
- 洛谷3119 [USACO15JAN]草鉴定Grass Cownoisseur
原题链接 显然一个强连通分量里所有草场都可以走到,所以先用\(tarjan\)找强连通并缩点. 对于缩点后的\(DAG\),先复制一张新图出来,然后对于原图中的每条边的终点向新图中该边对应的那条边的起 ...
- Luogu 2157 [SDOI2009]学校食堂 - 状压dp
Solution 比较好想的dp, 但是坑不少QAQ, 调半天 由于容忍度 $b_i$<= 7, 所以可以考虑将第$i$个人接下来的$b_i$ 个人作为一个维度记录状态. 于是我们定义数组$f[ ...
- ok,机房小感
难得一次能早来机房,趁今天考完试没啥事,随便写两句牢骚. 学习与编程 老师曾经在招生的时候认真讨论过这个问题,这两者彼此协调并不是一件容易事,很明显,编程是一门大课.它虽然与理科有一定联系,但不代表它 ...
- RAC初步使用
信号基本流程: //1:创建信号 RACSignal *signal = [RACSignal createSignal:^RACDisposable * _Nullable(id<RACSub ...