CSS3学习系列之背景相关样式（一）
- 新增属性：
background-clip:指定背景的显示范围
background-origin：指定绘制背景图像时的起点
background-size：指定背景中图像的尺寸
background-break：指定内联元素的背景图像进行平铺时的循环方式
- background-clip属性
在HTML页面中，一个具有背景的元素通常由元素的内容、内容补白（padding）、边框、外部补白（margin）构成。
元素背景的显示范围在css2与css2.1、css3中的并不相同，在css2中，背景的显示范围是指内部补白之内的范围，不包括边框；而在css2.1至css3中，背景的显示范围是指包括边框在内的范围，在css3中，可以使用background-clip来修改背景的显示范围，如果将background-clip的属性值设定为border，则背景范围包括边框区域，如果设定为padding则不包括边框区域。例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两种background-clip属性值的对比示例</title>
<style>
div {
background-color: black;
border: dashed 15px green;
padding: 30px;
color: white;
font-size: 30px;
font-weight: bold;
margin: 50px 0;
} div.div1 {
-moz-background-clip: border;
-webkit-background-clip: border;
background-clip: border;
} div.div2 {
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding;
}
</style>
</head>
<body>
<div id="div1">
示例
</div>
<div id="div2">
示例里
</div>
</body>
</html>
（有出入）
- background-origin属性
在绘制背景图像时，默认是从内部补白（padding）区域的左上角开始，但是可以利用background-origin属性来指定绘制时从边框的左上角开始，或者从内容的左上角开始。
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-origin属性使用示例</title>
<style>
div {
background-color: black;
border: dashed 15px green;
padding: 30px;
color: white;;
font-size: 2em;
font-weight: bold;
} div.div1 {
-moz-background-origin: border;
-webkit-background-origin: border;
background-origin: border-box;
} div.div2 {
-moz-background-origin: padding;
-webkit-background-origin: padding;
background-origin: padding-box;
} div.div3 {
-moz-background-origin: content;
-webkit-background-origin: content;
background-origin: content-box;
}
</style>
</head>
<body>
<div id="div1">
示例
</div>
<div id="div2">
示例里
</div>
<div id="div3">
示例里示例里
</div>
</body>
</html>
- background-size属性
在css3中，可以使用background-size属性来指定背景图像的尺寸，例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-size属性的使用示例</title>
<style>
div{
background-color: black;
background-image: url(flower-red.png);
padding:30px;
color:white;
font-size:2em;
font-weight: bold;
background-size: 40px 20px;
-webkit-background-size: 40px 20px;
}
</style>
</head>
<body>
<div>
示例
</div>
</body>
</html>
- background-break属性
将background-break属性指定为bounding-box的时候，背景图像在整个内联元素中进行平铺，指定为each-box的时候，背景图像在每一行中进行平铺，指定为continuous的时候，下一行中的图像紧接着上一行中的图像继续平铺，例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-break属性的使用示例</title>
<style>
span{
background-color: #888888;
background-image: url(flower-green.png);
padding: 0.2em;
color:gray;
line-height: 1.5;
font-size: 1em;
font-weight: bold;
}
div.div1 span{
-moz-background-inline-policy:bouding-box;
}
div.div2 span{
-moz-background-inline-policy:each-box;
}
div.div3 span{
-moz-background-inline-policy:continuous;
}
</style>
</head>
<body>
<div class="div1">
示例
</div>
<div class="div2">
示例
</div>
<div class="div3">
示例
</div>
</body>
</html>
- 在一个元素中显示多个背景图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在一个元素中显示多个背景图像的示例</title>
<style>
div{
background-image: url(flower-red.png),url(flower-green.png),url(sky.jpg);
background-repeat: no-repeat,repeat-x,no-repeat;
background-position: 3% 98%, 85%,conter conter,top;
width:300px;
padding: 90px 0px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- border-radius属性
在css3中，只要使用border-radius属性指定好圆角的半径，就可以绘制圆角边框了。例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制圆角边框示例</title>
<style>
div{
border:solid 5px blue;
border-radius:20px;
-moz-border-radius: 20px;
-o-border-radius:20px;
-webkit-border-radius: 20px;
background-color: skyblue;
padding: 20px;
width: 180px;
}
</style>
</head>
<body>
<div>文字问文字问文字问文字问文字问文字问文字问</div>
</body>
</html>
CSS3学习系列之背景相关样式（一）的更多相关文章
- CSS3学习系列之背景相关样式（二）
在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处 ...
- CSS3学习系列之盒样式（一）
盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1 ...
- CSS3学习系列之盒样式（二）
text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...
- CSS3学习系列之布局样式（二）
使用盒布局 在CSS3中,通过box属性来使用盒布局,例子如下: <!DOCTYPE html> <html lang="en"> <head> ...
- CSS3学习系列之布局样式（一）
多栏布局 使用float属性或position属性的缺点: 使用float属性或position属性进行页面中的简单布局的例子. <!DOCTYPE html> <html lang ...
- [CSS3]学习笔记-CSS基本样式讲解
1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en ...
- css3学习系列之选择器（一）
CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...
- CSS3学习系列之选择器（二）
first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...
- CSS3学习系列之选择器（四）
使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none ...
随机推荐
- [笔记]ACM笔记 - 自用模板
长期更新. 快速幂 lld pow_mod(lld a, lld b, const int &pr) { lld ans = 1; while (b) { if (b & 1) ans ...
- String的Intern方法详解
引言 在 JAVA 语言中有8中基本类型和一种比较特殊的类型String.这些类型为了使他们在运行过程中速度更快,更节省内存,都提供了一种常量池的概念.常量池就类似一个JAVA系统级别提供的缓存.8种 ...
- ER模型的学习
(计应154兰家才)在建立表后开始了学习的第一步,了解数据库的基本知识,就以建立bbs论坛为标准学习er模型,首先建立了4个表分别是BBSReply,BBSSection,BBSTopic,BBSUs ...
- 关于TOE(TCP/IP Offload Engine)
前言 昨天在电脑上抓取的报文,想进行回话,但是发现全部被设备丢弃了,没有debug信息,查看了抓包文件,原来是IP头和TCP.UDP头的检验和全部为0,也就是TOE(TCP/IP Offload En ...
- js算法集合（二） javascript实现斐波那契数列 （兔子数列）
js算法集合(二) 斐波那契数列 ★ 上一次我跟大家分享一下做水仙花数的算法的思路,并对其扩展到自幂数的算法,这次,我们来对斐波那契数列进行研究,来加深对循环的理解. Javascript实 ...
- ACCESS数据库增强器需求及介绍
目前版本:ver1.0.0.2 现已支持cs文件浏览,高亮显示 针对如下图所示的access数据库,我想导出access数据库的所有或者部分表的表结构,还想对表进行封装,封装如下所示. using S ...
- OBS实现直播解决方案【html实现直播】
项目的需要,要整一个视频直播,但又不想在其他平台那种直播室盗链展示,那我就直接用播放器来实现rtmp流媒体服务器推流吧!没废话,走起 1.你要有一个媒体服务器,暂时用[盘古云],这个还好,算是不错的平 ...
- 《一起》Alpha版软件使用说明
1.引言 1.1编写目的 本手册是软件工程概论团队项目<一起>的Alpha版使用说明,面向的对象群体为全校师生. 1.2项目背景 本项目由<软件工程概论>课程需求创建,软件由S ...
- Java 开发中如何正确踩坑
为什么说一个好的员工能顶 100 个普通员工 我们的做法是,要用最好的人.我一直都认为研发本身是很有创造性的,如果人不放松,或不够聪明,都很难做得好.你要找到最好的人,一个好的工程师不是顶10个,是顶 ...
- web工作过程
了解浏览器与服务器进行通信和访问的过程 打开浏览器-输入URL地址 当我们访问一个网页时,如http://www.baidu.com,这个网址包含四个部分的内容: 1.第一部分:协议类型:这里是htt ...