背景属性和边框属性
此文章有对应视频讲解,方便大家更易于理解。背景、边框属性、css雪碧图讲解。视频对应64~71。
css的背景和边框属性是css中的一个模块,它可以让你为元素的背景和边框设置样式。背景可以用颜色或图像填充,裁剪和调整大小,以及其他方式的修改。边框可以用线条或图像装饰,并制作成方形和圆形。此外,元素的框框可以用阴影来装饰。
背景属性
属性 | 属性值 | 描述 |
---|---|---|
background-color | 单词颜色表示法、rgb、十六进制 | 设置元素的背景颜色 |
background-image | url('www.aaa.com/1.png') | 给一个元素设置一个或多个背景图像 |
background-position | top,left,center,百分比,px, | 为每一个背景图片设置初始位置 |
background-repeat | repeat-x|repeat-y|repeat|spance|round|no-repeat | 定义背景图像的重复方式。 背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。 |
background-image
给一个元素设置一个或多个背景图像,
语法:
background-image:url('1.png')
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图像</title>
<style type="text/css">
.bg{
width: 450px;
height: 450px;
border: 3px solid #FC02FF;
background-image: url('2.jpeg');
}
</style>
</head>
<body>
<div class="bg">
</div>
</body>
</html>
效果展示:
图像默认水平和垂直都平铺。
background-repeat
如果想让背景图像不平铺,则使用background-repeat
background-repeat的属性值
数值值 | 描述 |
---|---|
repeat | 默认值。表示背景图水平和垂直方向都平铺 |
no-repeat | 表示背景图水平和处置方向都不平铺 |
repeat-x | 表示背景图只有水平方向上平铺 |
repeat-y | 表示背景图只有垂直方向上平铺 |
background-repeat:no-repeat;
background-position
此属性表示背景图定位初始位置。background-position
是background-position-x
和background-position-y
的综合属性。如果想使用background-position
属性,那么必须先指定background-image
属性。
语法
background-position:x y;
background-position: position position
取值
-
关键词:比如
top、right、bottom、left和center
-
长度值:比如
px、em
-
百分值:50%
另外,它的默认值为: 0% 0%。此时背景图像将被定位与内容区域的左上角。
最常用的是值也可以说最了解的值是关键词和长度值,当然百分比也会使用,然而百分比使用最多的是0%
、50%
和100%
。
background-position:top left; /*背景图像在起始位置 跟:background-position: 0 0; 一样。*/
background-position:top right; /*背景图像在右上角*/
background-position:top center; /*背景图像上方居中显示*/
那么top left center bottom
四个属性值总共出现的情况有:
background-position:top left; /*左上角*/
background-position:top center;/*上方居中*/
background-position:top right;/*右上角*/
background-position:center top;/*中间靠左*/
background-position:center center;/*中心显示*/
background-position:center right;/*中间靠右*/
background-position:bottom left;/*左下角*/
background-position:bottom center;/*下方居中*/
background-position:bottom right;/*右下角*/
如果设置长度单位,比如
background-position:50px 100px;
如果设置为负值,表示反方向x和y轴定位背景图像。其实通过这个定位技术,我们在后面的精灵图技术中重点讲解。
background-position:-20px -30px;
好了,前面说过了,background-position的取值除了长度值和关键字之外,还可以取值为百分比值。比如:
background-position:100% 0%; /*right top*/
background-position:50% 0%; /*top center*/
background-position:50% 50%;/*center center*/
background-position:50% 100%;/*center bottom*/
那么问题来了,你真的了解background-position
取值为百分比的计算比例吗?如果我的百分比值不是和关键词对等的值呢?那么它是怎么计算的?这一系列的问题,你是否有仔细的思考过。就我个人而言,我以前所理解也存在一个误区:
我一直理解的
background-position
百分比值,它是相对于背景图片的尺寸。
但事实上,这种理解是一种错误。这也是今天踩的坑发现的。然后立马查了一下相关的规范文档,才彻底的搞清楚。那接下来,咱们就来聊background-position
取值为百分比的计算方式。
W3C规范是这样描述的:
A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by ‘background-size’.
也就是说,当背景图片尺寸(background-size
)不做任何的重置(也就是100% 100%
)时,水平百分比的值等于容器宽度百分比值减去背景图片宽度百分比值。垂直百分比的值等于容器高度百分比值减去背景图片高度百分比值。
比如前面的示例,如果取值background-position: 75% 50%;
,背景图片的起始位置:
- 水平位置(
x
轴):(456 - 100) * 75% = 262.5px
- 垂直位置(
y
轴):(456 - 100) * 50% = 175px
看效果:
CSS Sprite 雪碧图
CSS雪碧图技术:即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。来举几个例子。如图
左边的导航和右边的立即注册的按钮,都是通过css的背景定位对雪碧图进行定位然后展示上去的。
如图所示,网页中常见的雪碧图
使用雪碧图的使用场景
-
静态图片,不随用户信息的变化而变化
-
小图片,图片容量比较小(2~3k)
-
加载量比较大
一些大图不建议制作雪碧图
优点
- 有效的减少HTTP请求数量
- 加速内容显示
每次请求一次,就会和服务器连接一次,建立连接是需要额外的时间开销的。
雪碧图的实现原理
它通过css的背景属性的backrground-position的来控制雪碧图的显示。
控制一个层,可显示的区域范围大消息,通过一个窗口,进行背景图的移动。
雪碧图的制作
本课程中使用Adobe IIIustrator软件来快速的制作雪碧图。
边框属性
之前咱们在讲解盒模型的时候,提到了border的相关使用,我们当时对边框使用三要素的形式将它划分,除了设置粗细,颜色,线性样式,想想一下边框还能呈现什么效果呢?
比如我们想让方形四角有圆角效果、制作椭圆、圆、甚至让盒子出现阴影的效果,在css2中是不易实现的,所以在这里为了更加方便的学习后面的第一阶段的项目,我们需要学习两个css3属性:border-radius和border-shadow
。
border-radius
传统的圆角生成方案,必须使用多张图片作为背景图案。css3的出现,使得我们再也不必浪费时间去制作这些图片,并且还有其他多个有点:
- 减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不再需要了。
- 提高网页性能。由于不必再发出多条的HTTP请求,网页的载入速度将变快
- 增加视觉可靠性。(网络拥堵、服务器出错、网速过慢等等),背景图片会下载失败,导致视觉效果不佳。CSS3就不会发生这种情况。
css属性border-radius
允许您设置元素的外边框圆角。含义是“边框半径”。腻味这个属性提供一个值,就能同时设置四个圆角的半径。属性值可以使用:em、px、百分比来表示。
比如,下面有一个div方框:
现在设置它的圆角半角为15px;
border-radius:15px;
这条语句同时将每个圆角的“水平半径"(hrizontal radius)和“垂直半径”(vertical radius)都设置为15px;
border-radius可以同时设置1到4个值。如果设置1个值,表示4个圆角都使用这个值。如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。
border-radius还可以用斜杠设置第二组值。这时,第一组值表示水平半径,第二组值表示垂直半径。第二组值也可以设置1到4个值,应用规则与第二组值相同
border-radius:15px 5px / 3px;
单个圆角的设置
除了同时设置四个圆角以外,还可以单独对每个角进行设置。对应四个角,CSS3提供四个单独的属性:
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
这四个属性都可以同时设置1到2个值。如果设置1个值,表示水平半径与垂直半径相等。如果设置2个值,第一个值表示水平半径,第二个值表示垂直半径。
border-top-left-radius: 15px;
border-top-left-radius: 15px 5px;
示例:border-radius效果
1.实现一个无边框圆
html部分:
<div class="circle"></div>
css部分:
.circle{
width: 200px;
height: 200px;
background-color: #843172;
border-radius: 50%;
}
2.实现一个圆环
html部分:
<div class="circle"></div>
css部分:
.circle{
width: 200px;
height: 200px;
border: 3px solid #FC0107;
background-color: #843172;
border-radius: 50%;
}
3.制作一个半圆
div {
width: 200px;
height: 100px;
background-color: lightgreen;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}
制作半圆有个规则,高度设置为宽度的一半,并且设置上左和上右两个的半径为宽度的一半。
box-shadow 阴影
通过使用box-shadow属性可以设置元素的阴影
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css阴影</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
box-shadow: 0 0 30px gray;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
语法:
box-shadow: h-shadow v-shadow blur color inset;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
color | 可选。阴影的颜色。 |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 |