一、CSS3 背景图像区域

background-clip(指定背景绘制区域)
ackground-clip: border-box / padding-box / content-box; /*没有padding的时候,content-box和padding-box效果一样*/

兼容性:IE9+、FireFox、Chrome、Safari、Opera

二、CSS3 背景图像定位

background-position (背景定位)

background-position: px / % ...;

background-origin(设置元素背景图片的原始起始位置)

background-origin: padding-box|border-box|content-box;

兼容性:IE9+、FireFox4+、Chrome、Safari5+、Opera

三、CSS3 背景图像大小

background-size(指定背景图片大小)
background-size: px / % / cover / contain; /*cover:把背景图片扩展至足够大,以使背景图片完全覆盖区域(即完全不留白)
contain:把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域(至少满足一边不留白)*/

兼容性:IE9+、FireFox4+、Chrome、Safari5+、Opera

四、CSS3 多重背景图像

background-image: url(img1.jpg), url(img2.png);

/*img1放前面,img2放后面*/

五、CSS3 渐变

线性渐变 - 从上到下(默认)

background: linear-gradient(direction, color-stop1, color-stop2, ...);

兼容性:IE10+、FireFox16+(3.6 –moz-内核)、Chrome26+(10.0 –webkit-)、Safari6.1+(5.1 –>webkit-)、Opera12.1+(11.6 –o-)

线性渐变 - 从左到右

background:-webkit-linear-gradient( begin-direction, color-stop1, color-stop2, ...);
background: -moz-linear-gradient( end-direction, color-stop1, color-stop2, ...);
background: -o-linear-gradient( end-direction, color-stop1, color-stop2, ...);
background: linear-gradient(to end-direction, color-stop1, color-stop2, ...); /*注意webkit是起始方向*/

线性渐变 – 对角

background:-webkit-linear-gradient( begin-level begin-vertical, color-stop1, color-stop2, ...);
background: -moz-linear-gradient( end-level end-vertical,color-stop1, color-stop2, ...);
background: -o-linear-gradient( end-level end-vertical,color-stop1, color-stop2, ...);
background: linear-gradient( to end-level end-vertical,color-stop1, color-stop2, ...); /*注意webkit是起始方向*/

线性渐变 – 自定义角度

background:-webkit-linear-gradient(angle, color-stop1, color-stop2, ...);  //默认从左往右
background: -moz-linear-gradient(angle, color-stop1, color-stop2, ...); //默认从下往上
background: -o-linear-gradient(angle, color-stop1, color-stop2, ...); //默认从下往上
background: linear-gradient(angle, color-stop1, color-stop2, ...); //默认从下往上(优先级高) /*angle单位deg*/

线性渐变 – 颜色结点自定义分布

语法:同上,并在颜色值后加上 “空格+百分比” (透明色:transparent)

线性渐变 – 重复渐变

语法:同上,并在linear前加repeating-

径向渐变

background: radial-gradient(center, shape size, start-color, ..., last-color);

/*center默认居中,可不写
center值改为:px / %等可定位圆心位置*/

径向渐变 - 颜色结点均匀分布(默认)

background:-webkit-radial-gradient(color-stop1, color-stop2, ...);
background: -moz-radial-gradient(color-stop1, color-stop2, ...);
background: -o-radial-gradient(color-stop1, color-stop2, ...);
background: radial-gradient(color-stop1, color-stop2, ...);

径向渐变 - 颜色结点自定义分布

语法:与线性同理

径向渐变 – 设置形状

background:-webkit-radial-gradient(shape, color-stop1, color-stop2, ...);
background: -moz-radial-gradient(shape, color-stop1, color-stop2, ...);
background: -o-radial-gradient(shape, color-stop1, color-stop2, ...);
background: radial-gradient(shape, color-stop1, color-stop2, ...); /*shape的值:
circle —— 圆形
ellipse —— 椭圆(默认)*/

径向渐变 – 尺寸大小(关键字的使用)

background:-webkit-radial-gradient(size, color-stop1, color-stop2, ...);
background: -moz-radial-gradient(size, color-stop1, color-stop2, ...);
background: -o-radial-gradient(size, color-stop1, color-stop2, ...);
background: radial-gradient(size, color-stop1, color-stop2, ...); /*关键字size说明(相对圆心)
closest-side:最近边
farthest-side:最远边
closest-corner:最近角
farthest-corner:最远角*/

径向渐变 – 重复渐变

语法:与线性同理

IE低版本浏览器的渐变

filter:progid:DXImageTransform.Microsoft.gradient( >StartColorstr='color1',EndColorstr='color2',GradientType=0);

综合案例:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>综合</title>
<style type="text/css">
div {
width: 800px;
height: 500px;
background: #abcdef;
background-size: 50px 50px;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
background-image:
-moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(45deg, transparent 75%, #555 75%),
-moz-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image:
-o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(45deg, transparent 75%, #555 75%),
-o-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image:
linear-gradient(45deg, #555 25%, transparent 25%, transparent),
linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #555 75%),
linear-gradient(-45deg, transparent 75%, #555 75%);
}
</style>
</head> <body>
<div></div>
</body> </html>

CSS3背景与渐变的更多相关文章

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

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

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

  3. css3背景颜色渐变属性

    https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...

  4. 关于css3背景图片渐变的规则

    1. Webkit引擎的CSS3径向渐变语法        Webkit引擎下的老版本语法:-webkit-gradient([<type>],[<position> || & ...

  5. CSS3背景,渐变

    1,有利于代码维护,有利于使用debug进行调试打断点.2,后面三个都存在计算,所以分开写最好.背景复合属性最好的写法,background:#abcdef url() no-repeat 50px ...

  6. css3背景颜色渐变

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  7. css3基础-选择器+边框与圆角+背景与渐变

    Css3选择器相关: section > div直接子元素选择器 div + article相邻兄弟选择器(在元素之后出现) div ~ article通用兄弟选择器(在元素之后出现) 属性选择 ...

  8. CSS3之径向渐变

        设置最终形状参数: ellipse circle 设置长半轴和短半轴 设置椭圆对称中心 设置色标 输出代码: radial-gradient(circle closest-side at ce ...

  9. css3的背景颜色渐变@线性渐变

    背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...

随机推荐

  1. wxWidgets开始编程

    开始学习wxWidgets.上一页写"安装wxWidgets两遇到的障碍"(缩写"前言"). 先推荐一下这两天找到的学习材料. 博客中有一个系列教程,貌似作者没 ...

  2. 算法 Tricks(六)—— 判断一个数是否为完全平方数

    int(sqrt(n)) * int(sqrt(n)) == n ? 1:0; matlab 下判断一个数是否能开方的判断是: floor(sqrt(m))^2 == m

  3. Oracle召回

    后几集录制视频,记录在记录开始的时候不知道怎么,录了几集没有什么,够又一次录,过程中也也把Oracle数据库这部分看了一遍,收获也挺多的,学习是反复积累的过程,对于一些零散的知识点又回想了一下,又一次 ...

  4. WPF: WrapPanel 容器的数据绑定(动态生成控件、遍历)

    原文:WPF: WrapPanel 容器的数据绑定(动态生成控件.遍历) 问题:        有一些CheckBox需要作为选项添加到页面上,但是数目不定.而为了方便排版,我选择用WrapPanel ...

  5. windows常用cmd指令

    打开命令行 1.在菜单栏中搜索命令行 2.在文件管理器的Path栏输入cmd,则在当前目录打开命令行 3.Windows+R,输入cmd,回车 ping(网络诊断工具) ping是Windows.Un ...

  6. redis SERVER INSTALL WINDOWS SERVICE

    以管理 员身份 运行 CMD 命令,进入redis所在目录,并运行下 脚本redis-server --service-install redis.windows-service.conf --log ...

  7. Python爬虫: "追新番"网站资源链接爬取

    “追新番”网站 追新番网站提供最新的日剧和日影下载地址,更新比较快. 个人比较喜欢看日剧,因此想着通过爬取该网站,做一个资源地图 可以查看网站到底有哪些日剧,并且随时可以下载. 资源地图 爬取的资源地 ...

  8. Oracle配置OneMap中的sql数据库问题及解决方案

    报错ORA-00900:无效SQL语句,点确定后报错:ORA--00942:表或视图不存在 分析:prompt在Oracle中是打印功能,如果要在PLsql中执行带有prompt的sql文件就会报上面 ...

  9. Android零基础入门第62节:搜索框组件SearchView

    原文:Android零基础入门第62节:搜索框组件SearchView 一.SearchView概述 SearchView是搜索框组件,它可以让用户在文本框内输入文字,并允许通过监听器监控用户输入,当 ...

  10. 百度网盘背后的存储系统atlas

    原文  http://www.bitstech.net/2015/07/25/baidu-atlas/   百度网盘免费提供2TB存储, 它的存储量一定是惊人的, 支持它的存储系统atlas也是相当不 ...