有趣的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还允许我们为元素使用多个背景图 ...
随机推荐
- JFinal Model判断数据库某条记录的属性字段是否包含空值
如果做报表,一条记录中有空值,使用FreeMarker渲染word会报错,并把错误日志输出到Word中.所以需要之前判断下当前记录中属性值是否有空值. package com.huijiasoft.u ...
- 比特币测试网络搭建以及RPC服务开启-配置注意事项
.bitcoin QA Test环境 启动指定参数: "C:\Program Files (x86)\Bitcoin\bitcoin-qt.exe" -testnet -serve ...
- JAVA虚拟机是?为什么称作是“平台无关的语言”?
Java虚拟机(Java Virtual Machine)简称JVM ,它是抽象化的计算机,有自己完善的硬体架构,如处理器.堆栈.寄存器等,还具有相应的指令系统.JVM屏蔽了与具体操作系统平台相关的信 ...
- org.apache.commons.net.ftp
org.apache.commons.NET.ftp Class FTPClient类FTPClient java.lang.Object Java.lang.Object继承 org.apache. ...
- sql server 查询不为空的字段
经常用,经常忘 select * from table where content is not null and datalength(content)<>0
- Linux系统和性能监控之CPU篇
Linux系统和性能监控之CPU篇 性能优化就是找到系统处理中的瓶颈以及去除这些的过程.本文由sanotes.net站长tonnyom在2009年8月翻译自Linux System and Perfo ...
- 洛谷3084 [USACO13OPEN]照片Photo
原题链接 神仙\(DP\)啊... 题解请移步隔壁大佬的博客\(QAQ\) #include<cstdio> using namespace std; const int N = 2e5 ...
- Nowcoder OI赛制测试2 F 假的数学题 - 斯特林公式 + 二分
Description 给定$X$, 找到最小的$N$ 使得$N! > X^X$ 数据范围: $x <= 1e11$ Solution $X^X$ 太大, 高精也存不过, 所以取对数 : ...
- PHD实时数据对象
PHD实时数据库在化工制造业的应用 PISDK 开发包 电力企业信息化
- jquery全选反选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...