今天逛的时候发现了一个有趣的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背景 斜条纹的更多相关文章

  1. 发现两个有趣的CSS3效果

    一.CSS3画机器猫 http://keleyi.com/keleyi/phtml/html5/3.htm 哆啦A梦效果图: 可用于浏览器对CSS3支持情况的测试 但最近有人对这个测试表示怀疑,指该测 ...

  2. CSS3背景温故

    1.背景的五种基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示方式)background-attachm ...

  3. css3 背景记

    css3 背景 css背景主要包括五个属性: background-color background-color:transparent || <color> 用来设置元素的背景颜色,默认 ...

  4. CSS自学笔记(11):CSS3背景和边框

    CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...

  5. 第七十九,CSS3背景渐变效果

    CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一.线性渐变 linear-gradi ...

  6. 从零开始学习前端开发 — 17、CSS3背景与渐变

    一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...

  7. 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 ...

  8. [转]真正了解CSS3背景下的@font face规则

    本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...

  9. css3 背景background

    Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...

随机推荐

  1. c# txt内存映射技术总结

    对于大文件操作,readline 的方式读取文档,那操作起来跟蜗牛爬一样的慢了, 于是使用内存映射技术, 参考微软的这个使用方法说明 https://msdn.microsoft.com/zh-cn/ ...

  2. Oracle_SQL(3) DML增删改

    sql语言按功能分为:数据定义语言DDL.数据操纵语言DML.数据查询语言DQL.数据控制语言DCL 一.数据操纵语言DML1.insert 新增 语法:insert into <表名> ...

  3. python使用sqlite

    摘自python帮助文档 一.基本用法 import sqlite3 conn = sqlite3.connect('example.db')#conn = sqlite3.connect(':mem ...

  4. L1-025 正整数A+B(15)(思路+测试点分析)

    L1-025 正整数A+B(15 分) 题的目标很简单,就是求两个正整数A和B的和,其中A和B都在区间[1,1000].稍微有点麻烦的是,输入并不保证是两个正整数. 输入格式: 输入在一行给出A和B, ...

  5. PAT 1066 图像过滤(15)(代码)

    1066 图像过滤(15 分) 图像过滤是把图像中不重要的像素都染成背景色,使得重要部分被凸显出来.现给定一幅黑白图像,要求你将灰度值位于某指定区间内的所有像素颜色都用一种指定的颜色替换. 输入格式: ...

  6. Linux Centos7 虚拟机上网设置

    一.Windows下网卡,共享上网模式 二.虚拟机VMnet8的网卡模 三.Linux 下配置网卡 命令: vi /etc/sysconfig/network-scripts/ifcfg-ens33 ...

  7. Mybatis 加载 Mapper配置的四种方式

    具体信息 https://blog.csdn.net/tanga842428/article/details/79285957

  8. SNP(单核苷酸多态性)准确性的验证,你造吗?

    SNP(单核苷酸多态性)准确性的验证,你造吗? [2016-12-12]       SNP(全称Single Nucleotide Polymorphisms)即单核苷酸多态性,主要是指在基因组水平 ...

  9. php中static静态关键字的使用方法和应用场景

    php中除了常规类和方法的使用,访问控制之外,还有静态关键字static,静态变量可以是局部变量也可以是全局变量,当一个程序段执行完毕时,静态变量并没有消失,它依然存在于内存中,下次在定义时还是以前的 ...

  10. 搭建java环境和java学习

    https://blog.csdn.net/fishe_r/article/details/18863447 其中的 java配置文件用: { "shell_cmd": " ...