今天逛的时候发现了一个有趣的css3实现的背景效果,代码实现

  1. .noaccess {
  2. position: absolute;
  3. width: 300px;
  4. height: 100px;
  5. z-index:;
  6. background-color: #999;
  7. opacity: .5;
  8. top:;
  9. bottom:;
  10. display: block;
  11. 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));
  12. /* 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); */
  13. 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);
  14. 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);
  15. /* 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); */
  16. -webkit-background-size: 32px 32px;
  17. -moz-background-size: 32px 32px;
  18. -o-background-size: 32px 32px;
  19. background-size: 32px 32px;
  20. }

有趣的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. [z]重建索引

    https://blog.csdn.net/funnyfu0101/article/details/52961485 所有执行的结果是脚本命令集合,可以用来创建索引: a)在plsql中使用execu ...

  2. Soa思想分布式服务webservice WCF

    什么是分布式事务 分布式事务就是指事务的参与者.支持事务的服务器.资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上.以上是百度百科的解释,简单的说,就是一次大的操作由不同的小操作组成,这 ...

  3. Linux系统安装过程

    一.安装VMware® Workstation 14 Pro,有一些安装时会出现virtual XT的错误,这需要重启电脑进入BIOS,开户虚拟加速开关:有些win8/10会出现虚拟网卡安装失败的情况 ...

  4. Sevlet处理HTML表单

    表单<form>用于搜集不同类型的用户输入.可以轻松地将一个HTML表单从一个Servlet发送到浏览器,当用户提交表单时,在表单元素中输入的值就会被当做请求参数发送到服务器. reque ...

  5. PHP 5.6 开启CURL HTTPS 类型

    前几日要写微信支付接口,微信支付接口CURL地址是HTTPS.本机测试的是OK的,但是服务器缺提示错误--“ Protocol https not supported or disabled in l ...

  6. msgs no .h file

    1.单独编译包,catkin_make --pkg 包名,failed,则 2.进入build下对应的msgs包中,使用make,以及make install,failed,则 3.使用catkin_ ...

  7. PHP + Redis 队列实战

    环境 centos6.5 PHP5.3 Redis安装 #yum install redis 1.redis配置认证密码 #vi /etc/redis.conf requirepass mypass ...

  8. barcode(index)

    在很多情况下,我们需要把多个样本混合在一起,在同一个通道(lane)里完成测序.像转录组测序.miRNA测序.lncRNA测序.ChIP测序等等,通常每个样本所需要的数据量都比较少,远少于HiSeq一 ...

  9. CRC-32的原理和实现

    /* crc32.c -- compute the CRC-32 of a data stream * Copyright (C) 1995-2002 Mark Adler * For conditi ...

  10. GCC选项之-M

    大多数的C/C++编译器都支持一个“-M”的选项,即自动找寻源文件中包含的头文件.举个例子,比如mian.c包含有如下头文件. #include <stdio.h> #include &q ...