background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(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: 20px 20px;
background-size: 20px 20px;

    background: -webkit-linear-gradient(top,transparent 39px,blue 40px),-webkit-linear-gradient(left,transparent 39px,red 40px);
background: -ms-linear-gradient(top,transparent 39px,blue 40px),-ms-linear-gradient(left,transparent 39px,red 40px);
background-size: 40px 40px;

background: -webkit-linear-gradient(top, transparent 39px, blue 39px, blue 41px, transparent 41px, transparent 79px, red 80px), -webkit-linear-gradient(left, transparent 39px, orange 39px, orange 41px, transparent 41px, transparent 79px, green 80px);
background-size: 81px 81px;

css3 网格背景的更多相关文章

  1. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. css3网格效果(整理)

    css3网格效果(整理) 一.总结 一句话总结: css3网格原理是渐变(linear-gradient)绘制图形,background-size属性指定重复的小单元的大小 多个渐变(linear-g ...

  3. CSS3之背景剪裁Background-clip

    CSS3之背景剪裁Background-clip是CSS3中新添加的内容.这个属性还是比较简单的,主要分五个属性值:border.padding.content.no-clip和text.下面将针对这 ...

  4. css实现网格背景

    只使用一个渐变时,我们能创建的图案并不多,当我们把多个渐变图案组合起来,让他们透过彼此的透明区域显现时,神奇的事情就发生了!我们首先想到的是把水平和水质条纹叠加起来,就可以得到各种各样的网格. 1. ...

  5. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  6. CSS3透明背景+渐变样式

    CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...

  7. CSS3之背景定位原点background-origin

    背景定位原点background-origin是CSS3新添加的有关背景的属性,主要是改变背景起始的原点位置的.CSS3之背景定位原点background-origin的属性值有三个:border.p ...

  8. 移动开发之css3实现背景几种渐变效果

    移动端背景渐变,非常的年轻,符合90后年轻一代的审美,css3的这个渐变目前主要是应用在手机前端领域. 产品设计中使用渐变色的好处:1:观众不至于眼睛过于疲劳(如果是浅色背景,3个小时下来极容易造成观 ...

  9. css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

随机推荐

  1. 编译android源码遇到错误及其解决方法

    升级ubuntu的14.04后,android的源码又编译错误了,一下是错误说明赫解决方法: 1.make: *** [out/host/linux-x86/obj/EXECUTABLES/aidl_ ...

  2. android studio 中由于网络问题,编译错误

    由于网络原因,需要连外网实现下载相关依赖包,导致编译失败 在 build.gradle文件中 将原来是jcenter()的地址改成 maven{ url 'http://maven.aliyun.co ...

  3. sql sever 执行较大的文件脚本

    1.用管理员身份打开cmd工具 2.执行命令 osql -S  localhost -U sa -P 123456 -i D:/test.sql -S 服务器地址  本地可简写 . -U 用户名 -P ...

  4. 三、cent OS安装配置nginx

    简介Tengine是淘宝发起的web服务器项目,简单的讲就是对nginx进行了二次开发并提供了更丰富的功能,官网地址:http://tengine.taobao.org/ 下载nginx这里使用淘宝二 ...

  5. Struts2 (四) — 拦截器

    一.拦截器 1.概述 1.1什么是拦截器 ​ 在struts2中,拦截器(Interceptor)是用来动态拦截Action执行的对象. ​ 拦截器有点类似以前Servlet阶段的Filter(过滤器 ...

  6. Struts2(二)— Result结果配置、Servlet的API的访问、模型驱动、属性驱动

    一.Result结果配置 1.全局和局部结果 ​ 平常我们设置跳转页面,是在action标签里面加上 result标签来控制,这种设置的页面跳转,称之为局部结果页面但是我们有时候在很多个action里 ...

  7. bootstrap学习笔记(网页开发小知识)

    这是我在学习Boostrap网页开发时遇到的主要知识点: 1.导航条navbar 添加.navbar-fixed-top类可以让导航条固定在顶部,固定的导航条会遮住页面上的其他内容,除非给<bo ...

  8. 关于webpack 配置文件找不到

    运行命令  npm run eject 将配置文件解压出来 如果运行这个命令有错的时候,很可能与 git 有关 这时候,打开项目文件夹,显示所有隐藏的文件夹(工具),如果显示了git 的文件夹  删掉 ...

  9. C语言——无向带权图邻接矩阵的建立

    #include <stdio.h> #include "Graph.h" #define MAX_INT 32767 /* #define vnum 20 #defi ...

  10. MySQL数据库(10)----IN 和 NOT IN 子查询

    当子查询要返回多个行来与外层查询进行比较运算时,可以使用运算符 IN 和 NOT IN.它们会测试某个给定的比较值是否存在于某一组值里.如果外层查询里的行与子查询返回的某一个行相匹配,那么 IN 的结 ...