今天逛的时候发现了一个有趣的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. JSON与GSON比较

    JSON: 是Android SDK官方的库,所以在开发移动端的工程时就必须使用JSON.进行数据的转换和处理 GSON: GSON适用于服务端,gson比json功能更加强大.比如在集合类的处理.自 ...

  2. ckplayer iis6 mp4 播放404错误

    设置mime. 1.右键网站 2.选择http头 3.点击编辑MIME按钮 4.新增MIME类型 5.在“扩展名”框内输入“mp4”,“MIME类型”框中输入“video/x-mp4” ps:类型不要 ...

  3. 进程同步(multiprocess.Lock、multiprocess.Semaphore、multiprocess.Event) day38

    进程同步(multiprocess.Lock.multiprocess.Semaphore.multiprocess.Event) 锁 —— multiprocess.Lock 通过刚刚的学习,我们千 ...

  4. Liunx history

    Linux中history历史命令使用方法详解   (转) 作者:青藤园来源:|2012-05-10 10:     http://os.51cto.com/art/201205/335040.htm ...

  5. About how fast is fast enough for a web application?

    About how fast is fast enough for a web application? Here’s a quick overview of key performance metr ...

  6. vue入门:axios的应用及拦截封装

    一.概述 在vue2.0项目中,我们主要使用axios进行http请求. axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特征: 1.从浏览器中创建X ...

  7. python轻量级orm

    python下的orm使用SQLAlchemy比较多,用了一段时间感觉不顺手,主要问题是SQLAlchemy太重,所以自己写了一个orm,实现方式和netsharp类似,oql部分因为代码比较多,没有 ...

  8. jvm gc 算法

    1标记-清除法 他是现代垃圾回收算法的思想基础. 标记-清除算法将垃圾回收分为两个阶段:标记阶段和清除阶段. 在标记阶段,首先通过根节点,标记所有从根节点开始的可达对象(根搜索算法).而未被标记的对象 ...

  9. 编译https://github.com/CIR-KIT/steer_drive_ros时出现的问题

    解决gazebo对应的protobuf版本问题: I've come across to the same problem. I'm using Ubuntu 16.04, ROS Kinetic a ...

  10. php服务器---IIS一些问题

    配置网上很多博客都介绍过..这里不作详细说明了..将PHP目录(D:\PHP\PHP)下的php.ini-recommended或者php.ini-dist改名为php.ini,并找到extensio ...