CSS Sprite雪碧图、背景和边框属性(推荐)

2,629 阅读9分钟
背景属性和边框属性

此文章有对应视频讲解,方便大家更易于理解。背景、边框属性、css雪碧图讲解。视频对应64~71。

css的背景和边框属性是css中的一个模块,它可以让你为元素的背景和边框设置样式。背景可以用颜色或图像填充,裁剪和调整大小,以及其他方式的修改。边框可以用线条或图像装饰,并制作成方形和圆形。此外,元素的框框可以用阴影来装饰。

背景属性
属性属性值描述
background-color单词颜色表示法、rgb、十六进制设置元素的背景颜色
background-imageurl('www.aaa.com/1.png')给一个元素设置一个或多个背景图像
background-positiontop,left,center,百分比,px,为每一个背景图片设置初始位置
background-repeatrepeat-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-positionbackground-position-xbackground-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) 改为内部阴影。