一、精灵图
1、精灵图的作用
场景:项目中将多张小图片,合并成一张大图片,这张大图片称之为精灵图
优点:减少服务器发送次数,减轻服务器的压力,提高页面的加载速度
例如:需要在网页中展示八张小图片
- 8张小图片分别发送—8次
- 合并成1张精灵图—1次
2、精灵图的使用步骤
- 创建一个盒子,设置盒子的尺寸和小图尺寸相同
- 将精灵图设置为盒子的背景图片
- 修改背景图位置:通过PxCook测量小图片左上角坐标,分别取负值设置给盒子的background-position: x y
<head>
<style>
span {
display: inline-block;
width: 100px;
height: 100px;
background-color: pink;
background-image: url(./image.jpg);
/* 背景图位置属性:改变背景图位置 */
/* 水平方向位置 垂直方向位置 */
/* 想要向左移动图片:位置取负数 */
background-position: -756px 0;
}
</style>
</head>
<body>
<!-- 精灵图的标签都用行内标签,span,b,i等 -->
<span></span>
</body>
二、背景图缩放
1、背景图片大小
作用:设置背景图片的大小
语法:background-size:宽度 高度;
取值 | 场景 |
数字+px | 简单方便,常用 |
百分比 | 相对于当前盒子自身的宽高百分比 |
contain | 包含,将背景图片等比例缩放,知道不会超出盒子的最大 |
cover | 覆盖,将背景图片等比例缩放,知道刚好填满整个盒子没有空白 |
2、数字+px
.box {
width: 500px;
height: 400px;
background-color: pink;
background-image: url(./image2.jpg);
background-repeat: no-repeat;
background-size: 500px 400px;
}
浏览器运行效果:
3、 百分比
.box {
width: 500px;
height: 400px;
background-color: pink;
background-image: url(./image2.jpg);
background-repeat: no-repeat;
/* background-size: 500px 400px; */
background-size: 50%;
}
浏览器显示效果:
4、contain
.box {
width: 500px;
height: 400px;
background-color: pink;
background-image: url(./image2.jpg);
background-repeat: no-repeat;
/* background-size: 500px 400px; */
/* background-size: 50%; */
/* 如果图的宽高与盒子的尺寸相同了,另一个方向停止缩放,导致盒子留白 */
background-size: contain;
}
浏览器显示效果:
5、cover
.box {
width: 500px;
height: 400px;
background-color: pink;
background-image: url(./image2.jpg);
background-repeat: no-repeat;
/* background-size: 500px 400px; */
/* background-size: 50%; */
/* 如果图的宽高与盒子的尺寸相同了,另一个方向停止缩放,导致盒子留白 */
/* background-size: contain; */
/* 保证图片的宽高和盒子完全相同,导致图片显示不全 */
background-size: cover;
}
浏览器显示效果:
三、文字阴影
值 | 描述 |
h-shadow | 必需。水平阴影的位置,允许负值 |
v-shadow | 必需。垂直阴影的位置,允许负值。 |
blur | 可选。模糊的距离。 |
color | 可选。阴影的颜色。 |
<head>
<style>
div {
text-shadow: 10px 10px 1px pink;
}
</style>
</head>
<body>
<div>文字阴影</div>
</body>
浏览器显示效果:
四、盒子阴影
作用:给盒子添加阴影效果,吸引用户注意,体现页面的制作细节
属性名:box-shadow
参数 | 作用 |
h-shadow | 必须。水平偏移量。允许负值。 |
v-shadow | 必须。垂直偏移量。允许负值 |
blur | 可选。模糊度。 |
spread | 可选。阴影扩大。 |
color | 可选。阴影颜色。 |
inset | 可选。将阴影改为内部阴影。 |
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
box-shadow: 5px 10px 20px 10px green;
/* 如果是内部阴影,则加上inset,外部不用加 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
浏览器显示效果:
五、过渡
作用:让元素的样式慢慢变化,常配合hover使用,增强网页的交互体验
属性名:transition
常见取值:
参数 | 取值 |
过渡的属性 | all:所有能过渡的属性都过渡、具体属性名如:width:只有width过渡 |
过渡的时长 | 数字+s(秒) |
注意点:
- 过渡需要:默认状态和hover状态样式不同,才能有过渡效果、
- transition属性给需要过渡的元素本身加
- transition属性设置在不同状态中,效果不同:
- 给默认状态设置,鼠标移入移出都有过渡效果
- 给hover状态设置,鼠标移入右过渡效果,移出没有过渡效果
<head>
<style>
/* 过渡配合hover使用,谁变化谁加过渡属性 */
.box {
width: 200px;
height: 200px;
background-color: pink;
/* 宽度200,悬停的时会宽度600,花费1秒钟 */
/* transition: width 1s,background-color 2s; */
/* 如果变化的属性多,直接写all,表示所有 */
transition: all 1s;
}
.box:hover {
width: 600px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>