IT兄弟连 HTML5教程 CSS3属性特效 CSS3背景
CSS3规范中对背景这一部分,新加入了一些有用的功能,如可以设置多个背景图片、可以指定背景大小、设置背景渐变等功能。CSS3规范中定义的背景属性新增了background-clip、background-origin、background-size,这三个属性描述如表1:
表1 CSS3新增背景属性
1 多背景
CSS3允许设置多个背景图片,每个背景用逗号隔开,每个背景图片占一层,层的上下显示按照在CSS中写的顺序来定,最先写的背景在最上层。
多背景的格式如下:
background: url(a.jpg) 0 0,url(b.jpg) 0 100%;
这里,我们使用三个图片为div制作三层背景,第一种方法是背景的简写方式,代码如下:
上述代码为div设置了三层背景,每层的背景图片平铺方式设为不重复,第一层背景引用了“bg1.jpg”图片,位于该div“0 0”的位置;第二层背景引用了“bg2.jpg”图片位于“200px 0”的位置;第三层背景引用了“bg3.jpg”图片位于“400px 0”位置。在浏览器里运行的结果如图1所示:
图1 三层背景重叠
除了这种简写方法外,我们还可以将background属性拆分开来,使用background-image、background-repeat和background-position分别来设置背景图片的地址,平铺方式和位置,CSS代码如下:
这段代码就是对上面代码的一个改写,在浏览器里的执行效果一样。值得注意的是,背景渐变也是一种背景层。下面我们为div设置三层背景,第一层背景为背景渐变,第二层背景为背景图。CSS代码如下:
第一层为从左到右的“rgba(255,255,0,1)”到“rgba(255,0,0,0)”的渐变背景,第二层为“itxdl.jpg”的背景图。在浏览器里运行的结果如图2:
图2 背景渐变层
2 背景尺寸
CSS3还新增了背景尺寸background-size属性,该属性可以设置具体的值,百分比等。该属性的取值及描述如表2:
表2 背景尺寸属性取值及描述
当我们为background-size设置一个值时,那么第二个值会被设置为“auto”。若对背景图片设置两个值时未与背景图本身大小成比例,容易是图片失真或变形。
下面有一个高度和宽度为200px的div,而我们想要将一张宽高为600px的图片作为背景图。我们想要将该图片填充到这个div的话,若没有background-size的属性,我们就需要使用一些软件将这张图片压缩再为设置背景,否则背景图片会溢出。未使用background-size时,CSS代码如下:
在浏览器里运行的结果如图3:
图3 背景图片未使用background-size
在这里我们只能看到“itxdl2.jpg”的左上角的三分之一。在为该背景图片的background-size设置为“200px 200px”、“200px auto”、“auto 200px”、“cover”和“contain”都可以达到全填充的目的。例如,我们在这里使用“200px auto”,增加“background-size: 200px auto”,CSS代码如下:
在浏览器里运行的结果如图4:
图4 背景图片全填充
只有当background-size值为auto时,背景图片才不会变形失真,而其他值都会造成背景图片变形夫真,所以大家使用时需要仔细考虑好,以免给你的制作带来不良效果。
3 background-origin
CSS3可以使用background-orgin属性设置图像的基准位置。该属性的取值及描述如表3:
表3 background-origin属性取值及描述
该属性默认取值为“padding-box”,顾名思义,从图像的填充框开始绘制。指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置,你可以用这个属性在边框上绘制背景,但边框上的背景显不显示出来那就要由background-clip来决定了。background-clip在下面的内容会提到。
这里,我们将div的边框设为半透明,体现出边框,又体现出边框中的背景。将其的背景图的background-origin设置为border-box,将其边框设为半透明。这时图像从边框界开始填充,代码如下:
该div的背景图从边框开始绘制,在浏览器里运行的结果如图5:
图5 背景图片基准位置
4 background-clip
CSS3可以使用background-orgin属性规定背景的绘制区域。background-clip控制的不仅仅是背景图片,而是控制整个元素背景的显示范围。该属性的取值及描述如表4:
表4 background-origin属性取值及描述
该属性的默认取值为“border-box”。指定了背景在哪些区域可以显示,但与背景开始绘制的位置无关,背景的绘制的位置可以出现在不显示背景的区域,这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。
这里,我为div设置“padding: 10px”。将其背景图的background-clip设置为content-box。这时图像背景从边框界开始填充,CSS代码如下:
在浏览器里运行的结果如图6所示:
图6 背景图片规定绘制区域
IT兄弟连 HTML5教程 CSS3属性特效 CSS3背景的更多相关文章
- IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...
- IT兄弟连 HTML5教程 CSS3属性特效 小结及习题
本章小结 CSS3新增了许多属性,CSS3样式新增了一种颜色模式rgba用来制作透明色,比CSS的颜色模式多了一个透明度的设置.文字的CSS3特效有文字阴影.文字描边.文字排版和文字省略等.另外,CS ...
- IT兄弟连 HTML5教程 CSS3属性特效 文字描边
用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...
- IT兄弟连 HTML5教程 CSS3属性特效 动画-animation
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...
- IT兄弟连 HTML5教程 CSS3属性特效 渐变1
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性5
9 透明属性 元素透明也是我们常用的样式,在CSS2中使用滤镜属性opacity实现透明效果.现在有了CSS3的rgba属性,就不用这么麻烦了,当然这也得要浏览器支持才行.通常我们定义颜色都是用十六 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性4
7 多列布局属性 通过CSS3,开发人员能够创建多列来对文本进行布局.在CSS2时代,对于多列布局的设计,大多采用浮动布局和绝对定位布局两种方式.浮动布局比较灵活,但是需要编写大量的附加样式代码,而 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性3
5 用户界面属性 在CSS3中,新的用户界面特性包括重设元素尺寸.盒尺寸及轮廓等.本小节着重介绍一下resize属性,只有Firefox 4和Safari 3浏览器支持此属性.resize属性可用于重 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性2
3 背景属性 在CSS3中提供了多个背景属性,这里只介绍两个比较常用的属性,其他属性可以从手册中获取帮助.在CSS3中,通过background-image或者background属性可以为一个容器 ...
随机推荐
- yum更换国内源、yum下载rpm包、源码包安装 使用介绍
第5周第4次课(4月19日) 课程内容: 7.6 yum更换国内源7.7 yum下载rpm包7.8/7.9 源码包安装 7.6 yum更换国内源 当yum仓库的软件不好用时,例如很多yum源都是国外的 ...
- Server MyEclipse Tomcat v7.0 was unable to start within 45 seconds. If the server requires more time
启动Tomcat服务器时经常遇到这个错误, Server MyEclipse Tomcat v7.0 was unable to start within 45 seconds. If the ser ...
- ant 自动化构建环境。
ant 一个自动化构建的工具 可以帮你实现自动化打包和发布到web环境上. 项目目录如下: 项目一:common-framework 项目二:estun-platform-web 其中项目一是项目二 ...
- Flask框架flash消息闪现学习与优化符合闪现之名
Flask的flash 第一次知道Flask有flash这个功能时,听这名字就觉得高端,消息闪现-是跳刀blink闪烁躲技能的top10操作吗?可结果让我好失望,哪里有什么闪现的效果,不过是平常的消息 ...
- [Coursera][计算导论与C语言基础][Week 10]对于“数组应用练习”课后习题的思考题的一些想法
(首先,关于Honor Code,我咨询过了Help Center,分享课后练习的思考题的想法是可以的(注意不是代码),但要标明引用,引用格式来源于https://guides.lib.monash. ...
- luogu P4064 [JXOI2017]加法
题目描述 可怜有一个长度为 n 的正整数序列 A,但是她觉得 A 中的数字太小了,这让她很不开心. 于是她选择了 m 个区间 [li, ri] 和两个正整数 a, k.她打算从这 m 个区间里选出恰好 ...
- 史上最全的iptables应用
第14章 防火墙的使用 14.1 防火墙的概念 将不安全的网络流量信息进行隔离 14.2 防火墙的实现 14.2.1 硬件实现 思科,华为防火墙服务器 14.2.2 软件实现 iptables(cen ...
- ARTS-S EN0001-In tech race with China, US universities may lose a vital edge
原文 The U.S. is still out in front of global rivals when it comes to innovation, but American univers ...
- ARTS-S redis3.2.10通过ip访问
只用把配制文件里的bind 127.0.0.1改成0.0.0.0,然后重启即可.不用再有别的配制.
- git下载问题
官网下载:打不开,可用git for Windows 下载 地址:https://github.com/git-for-windows/git/releases