课程目标
熟悉常见的样式写法，如背景图片、居中、透明等
学习建议
问答题一定要动手写 demo，否则学习效果只能达到5成
预习视频&课件
课程任务
问答
一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
- CSS Sprite定义与作用
- 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好。
- CSS Sprite运用实例
假设我们通过.toolbtn的类，为应用该类的各元素提供一张背景图片：
<style>
.toolbtn {
background:url(myfile.png);
display:inline-block;
height:20px;
width:20px
}
</style>
背景位置，可以通过在background的url()直接定义X,Y轴的值，或者通过background-position属性来添加。例如：
<style>
#btn1 {background-position: -20px 0px}
#btn2 {background-position: -40px 0px}
</style>
id=btn1的元素背景左移20px，id=btn2的元素背景左移40px（假设这两个元素的都添加了toolbtn类，应用了上面样式定义的图片效果）
类似的，你也可以使用下面的方式添加hover的状态：
#btn:hover {
background-position: [pixels shifted right]px [pixels shifted down]px;
}
自己来举个例子
1.首先将从iconfont下载的三种不同的“火箭”图放入雪碧图在线制作工具里
2.设置好相关参数后即可生成下载制作好的雪碧图
3.对照网站所呈现的参数，对html进行设置从而达到相应的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>雪碧图练习</title>
</head>
<style type="text/css">
div {
height: 200px;
width: 200px;
margin: 100px;
display: inline-block;
background: url(./result.png) 0 0 no-repeat;
border: 1px solid;
}
.s1 {
background-position: -500px 0;
}
.s2 {
background-position: -1000px 0px;
}
}
</style>
<body>
<div class="s1"></div>
<div class="s2"></div>
</div>
</body>
</html>
参考文章：
二、img标签和CSS背景使用图片在使用场景上有何区别
-
img标签的使用场景 - 希望该图片默认可以被点击
- 利用
img标签的alt属性可以给图片添加一些重要的信息，使得读者在图片在加载失败的情况下也能了解一些图片的信息 - 使用
img如果你依赖于浏览器缩放来呈现正比于文字大小的图像 - 利用
img实现在IE6中多个图片的叠加 - 使用
img可以极大地提高一个背景动画的性能 - CSS背景的使用场景
- 不希望该图片默认不能被点击
- 使用CSS背景图片如果该图片不是网页内容的一部分
- 使用CSS背景图片实现图像替换文字
- 使用CSS背景图片可以减少网络请求，提高加载速度，比如利用雪碧图
- 使用CSS背景图片可以实现仅让图片的一小部分显示，比如利用雪碧图
- 使用CSS背景图片中的
background-size: cover可以实现一个图片铺满整个窗口的效果
参考文章：
三、title和alt属性分别有什么作用
- title：为设置该属性的元素提供建议性的信息
- title表示元素的额外信息说明，给读者以思考是否有兴趣点击
- title为全局属性，可以应用到任何的元素上
- alt：它规定在图像无法显示时的替代文本
- alt在图片加载不了的情况下为图片提供了内容说明，告诉读者图片是什么内容
- alt只能运用于
areainput和img标签
以下为实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>about title and alt</title>
</head>
<body>
<a href="http://bbs.hupu.com/rockets" title="前往虎扑篮球论坛火箭专区" target="_blank"><img src="XXX" alt="虎扑篮球" /></a>
</body>
</html>
以下为输出结果
参考文章：
四、
background: url(abc.png) 0 0 no-repeat;这句话是什么意思
background 是CSS简写属性，用来集中设置各种背景属性。background 可以用来设置一个或多个属性:background-color, background-image, background-position, background-repeat, background-size, background-attachment，background-origin。
background-color：设置元素的背景色
background-image：为页面元素指定一个或多个背景图
background-position：指定背景图片的初始位置
background-repeat：指定背景图片是否以平铺效果重复出现，以及重复的方式
background-size：设置背景图片大小
background-attachment：决定背景是在视口中固定的还是随包含它的区块滚动的
background-origin：决定了background-position的初始位置
以上各个背景属性的描述详见：饥人谷知识点三：background那些事儿
由此可见，background: url(abc.png) 0 0 no-repeat;实际上是background属性的简写版本，可以拆分为以下三个语句
background: url(abc.png)/*使用背景图片abc.png*/
background-position: 0 0;/*指定背景图片的初始位置为0 0*/
background-repeat: no-repeat;/*背景图片不会沿着X轴和Y轴不断重复平铺整个页面*/
五、background-size有什么作用? 兼容性如何? 常用的值是?
- background-size的作用，常用的值详见：饥人谷知识点三：background那些事儿
-
兼容性如下
六、如何让一个div水平居中？如何让图片水平居中
- 如何让一个div水平居中，换句话可以说如何让一个块级元素水平居中
- 仅需设置左右margin为auto即可
- 如何让一个图片水平居中，换句话可以说如何让一个行内元素水平居中
- 设置其父容器的块级元素为
text-align: center，即可让该图片相对于其父容器的块级元素水平居中
以下为实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Horizontal Center</title>
</head>
<style>
.container {
width: 300px;
height: 200px;
border: 1px solid;
text-align: center;
margin-left: 50px;
margin: auto;
}
</style>
<body>
<div class="container">
<img src="./火箭-红.png" alt="火箭logo" />
</div>
</body>
</html>
以下为输出结果
七、如何设置元素透明? 兼容性？
设置元素的透明度有两种方法
- opacity：会继承父元素的opacity属性，父容器的下所有元素都设置为透明
- 语法
img{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
- rgba：设置的元素的后代元素不会继承不透明属性，只是针对自己本身有效
- 语法
background-color: rgba{255,0,0,0.5};
opacity兼容性如下
rgba兼容下如下
八、opacity和rgba都能设置透明，有什么区别
- opacity：会继承父元素的opacity属性，父容器的下所有元素都设置为透明
- rgba：设置的元素的后代元素不会继承不透明属性，只是针对自己本身有效
以下为实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity and rgba</title>
<style>
div {
height: 100px;
width: 300px;
border: 1px solid;
background: blue;
display: inline-block;
}
.div1 {
opacity: 0.5;
}
.div2 {
background: rgba(0, 0, 255, 0.5)
}
</style>
</head>
<body>
<div class="div1">
这是opacity设置的透明度
</div>
<div class="div2">
这是rgba设置的透明度
</div>
</body>
</html>
以下为输出结果
代码
- task_09extra_01
- task_09extra_01代码
- task_09extra_01预览
- task_09extra_02
- task_09extra_02代码
- task_09extra_02预览
- task_09extra_03
- task_09extra_03代码
- task_09extra_03预览
本教程版权归本人和饥人谷所有，转载须说明来源
内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
<small>文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</small>
