CSS3 background 与 渐变
一、CSS background 属性
了解background语法和css渐变的工作原理是使用一个元素绘制任何东西所需要基础。先来看background
语法:
background: <'background-color'> || <image> || <position> [ / <size> ]? || <repeat> || <attachment> || <origin> || <clip>;
这里需要特别注意的是:background-position
和background-size
在简写的background
属性中必须要有“/”,
否则会得到意 想不到的结果。
另外不是所有属性都必须使用上的,比如,我们有可能不会使用background-color
、background-repeat
、background-attachment
、background-origin
或background-clip
。如此下来就剩下了background-image
、background-size
和background-position
。由于background-repeat
的默认值是repeat
,所以必须将其设置为no-repeat
。如果背景中有内容需要重复,我们可以使用repeating-linear-gradient()
和repeating-radial-gradient()
两个渐变属性。在这种情况之下,我们的CSS可以这样写:
.image {background: <image> <position> / <size>;background-repeat: no-repeat;
}
CSS2中的Background属性:
background: background-color || background-image || background-repeat || background-attachment || background-position;也可以分解写成:background-color: color值 || RGBA值;background-image: url();background-repeat: repeat || repeat-x || repeat-y || no-repeat;background-attachment: scroll || fixed;background-position: <length> || <per>
CSS3中的Background属性
background: background-image || background-position/background-size || background-repeat || background-attachment || background-clip || background-origin || background-color也可以分解写成:background-image: url();background-position: <length> || <per>background-size: <length> || <per>background-repeat: repeat || repeat-x || repeat-y || no-repeat;background-attachment: scroll || fixed;background-clip: padding-box || border-box || content-box;background-origin: padding-box || border-box || content-box;background-color: color值 || RGBA值;
取值说明:
1、background-image:此值用来设置元素的背景图片,可以使用相对地址或绝对地址索引背景图片
2、background-repeat:此值用来设置元素的背景图片的平铺方式,其默认值为repeat
3、background-position:此值用来设置元素的背景图片的定位起点,其默认值为left top
4、background-size: 此值用来设置元素的背景图片的尺寸大小,其默认值为auto
5、background-attachment:此值用来设置元素的背景图片是否为固定显示,其默认值为scroll
6、background-clip:此值用来控制元素的背景图片显示区域,其默认值为border-box
7、background-origin:此值用来控制元素的背景图片position的默认起始点,其默认值为padding-box
8、background-color:此值用来设置元素的背景色,详细参考w3c的background-color。
1.1、多背景图的使用实例:
多背景中渲染的顺序与绝对或固定位置元素的顺序刚好相反,第一个会出现在顶部而不是底部。
<div class="card bigToSmall"></div>
<style>.bigSmallTo {background-image:url("../images/seven.png") ,url("../images/eight.png"),url("../images/nine.png");background-position: 0 0pt, 15px 20px, 30px 40px;background-repeat: no-repeat;-moz-background-origin: content-box;-webkit-background-origin: content-box;-o-background-origin: content-box;background-origin: content-box;}
</style>
效果:
背景精灵图自适应:
background: url('../images/icon.png') no-repeat -2px -2px;
-webkit-background-size: 背景图总体宽度 auto;
background-size: 背景图总体宽度 auto;
二、渐变
2.1、语法
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则
background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));IE:
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/IE依靠滤镜实现渐变;startColorstr表示起点的颜色,endColorstr 表示终点颜色,GradientType 表示渐变类型,0 为缺省值,表示垂直渐变,1 表示水平渐变。
2.2、径向渐变基本用法
<div class="circles"></div>
<style>
.circles { background: radial-gradient(7em 7em at 35% 35%, red 50%, transparent 50%), radial-gradient(7em 7em at 50% 50%, gold 50%, transparent 50%), radial-gradient(7em 7em at 65% 65%, blue 50%, transparent 50%); background-repeat: no-repeat; width: 240px; height: 240px; }
</style>
效果:
2.3、线性渐变基本用法
<div id="grad"></div>
<style>
#grad {/*background: linear-gradient(direction, color-stop1, color-stop2, ...);*/background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */background: linear-gradient(red, blue); /* 标准的语法 */
}
</style>
效果:
可以通过下面两种方法来定义这个角度:
- 使用关键词:
to top
、to bottom
、to left
、to right
、to top right
、to top left
、to bottom right
和to bottom left
- 使用带单位数字定义角度,比如
45deg
、1turn
等
CSS3 background 与 渐变相关推荐
- Css3: gradient背景渐变
Css3: gradient背景渐变 原文链接:http://kk073000.blog.163.com/blog/static/34826942012123111322691/ css3实现了背景渐 ...
- CSS3的线性渐变(linear-gradient)
CSS3渐变(gradient)可分为线性渐变(linear-gradient)和径向渐变(radial-gradient).今天给大家说一说线性渐变. 以webkit内核浏览器为例, 语法: div ...
- 【转】CSS3 圆角 阴影 渐变 透明 旋转等功能详述
本文转载自yu0319@126<CSS3圆角阴影渐变透明旋转等功能详述> 随着浏览器的升级,CSS3已经可以投入实际应用了. 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题.上 ...
- css透明到渐变,css渐变(css3背景透明渐变)
竖向使这个div的颜色渐变,从red开始渐变到白色,请问怎么写css代码?最好. CSS3支持颜色渐变,但目前主流浏览器对CSS3支持都不完全,甚至不支持.所以你可以使用背景图片来做,你要竖向渐变,可 ...
- html对称标记,html5/css3 字体 对称渐变+描边+影子
html5/css3 字体 对称渐变+描边+阴影 如题,如下图:如何实现 ?? 效果图: (图中1是对称渐变,2是线性渐变,实现其中一种就行,两种能实现那就最好,谢谢!!!) 下面我的代码已经实现了 ...
- html5 css3实现幻灯片效果代码,CSS3实现的渐变幻灯片效果
实现效果 代码 html CSS3: CSS3 delivers a wide range of stylization and effects, enhancing the web app with ...
- html渐变线条代码,CSS3实现线性渐变用法示例代码详解
前言 演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样; .testDiv { width:400px; height:400px; border ...
- CSS3 linear-gradient线性渐变实现虚线等简单实用图形
一.作为图片存在的CSS3 gradient渐变 我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景,也就是背景图片个数可以无限累加,正好CSS3的gradient渐变性质是 ba ...
- html背景线性渐变,CSS3背景颜色渐变 - 线性/放射性/循环
渐变就是多种颜色混合而成的效果,css3要实现渐变,就必须使用渐变函数来设置background或则background-imge属性.同时为了兼容各个浏览器(IE,safari,chrome,Fir ...
- CSS3 -webkit-transition(属性渐变)
-webkit-transition:CSS属性(none|all|属性) 持续时间 时间函数 延迟时间 CSS属性(transition-property):要变化的属性,比如元素变宽则是wi ...
最新文章
- 了解HTML 元素分类
- 运行第一个 Service - 每天5分钟玩转 Docker 容器技术(96)
- php图片缩略图的方法,php生成图片缩略图的方法
- 基于发电厂知识问答库的检索式问答系统(python有代码)
- 对两个字符串进行比较,取出两个字符串中一样部分的长度
- 【每日SQL打卡】​​​​​​​​​​​​​​​DAY 25丨求团队人数【难度中等】​
- 互联网晚报 | 9月2日 星期四 | 小米汽车有限公司正式成立;唯品富邦消费金融获批开业;恒大举行保交楼军令状签署大会...
- okhttp3 模拟get、post(json参数传递,form表单提交)
- ASP.NET AJAX客户端编程之旅(一)——Hello!ASP.NET AJAX
- 短网址算法 php,PHP短网址生成算法
- php asp网站本地调试,php/asp网站程序本地调试工具
- 数学建模竞赛代码及论文降重方法
- xv6操作系统中增加一个系统调用
- 树莓派编译工作空间卡死
- 生成带logo图像的二维码
- 游戏服务器需要什么配置?
- text-shadow阴影文本
- 尤雨溪亲自回应Vue.js涉及国家安全漏洞问题
- 【经典】直播、点播播放器ckplayer
- 2020年蓝桥杯第一次省赛