CSS的奇技淫巧-Assignment

2016-05-23 本文已影响202人犯迷糊的小羊

1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用

CSS Sprite是一种网页图片的处理技术，通过将多张图片整合到一张图片中，以减少访问图片的次数和图片文件的大小，最终达到网站性能优化的目的。

CSS Sprite将网页多张小规格图片的整合，形成一张包含多张图片素材的图片，如：

上图分别是四张图片，如果使用如下代码设置导航左侧的icon会产生4张图片，在访问页面时会产生4次request，不利于页面性能优化，浪费带宽和内存。

<li><img src="1.gif" alt="img" />football</li>    
<li><img src="2.gif" alt="img" />basketball</li>  
<li><img src="3.gif" alt="img" />badminton</li>  
<li><img src="4.gif" alt="img" />tennis</li>

若使用Css Sprite技术可以使得4张图片整合为1张图，在利用background-position属性实现一张图在同一区域的重复使用。

上图所示，四张图片通过CSS Sprite技术整合成一张图片，既减小的图片的大小和命名多张图片的麻烦，也减少访问服务器的次数。
代码设计具体见: 利用CSS Sprite技术实现sidebar的icon

2.img标签和CSS背景使用图片在使用场景上有何区别

img标签属于html的范畴，本质是语义化的显示图像的标签
syntax:
<img src="xxx.gif" alt="替代文本">
background-image属性是css范畴的内容，本质是为元素设置背景图的属性
syntax:
css选择器{background-image：url();}
在页面加载方式上，img标签作为文档内容的一部分，会随页面加载时同时加载进来；
background-image作为样式，要等页面加载完后背景才开始加载
img标签属于页面内容一部分，background-image属于样式以起到修饰页面的作用

综合以上区别，可以得出：image作为语义化标签，图像是有实际的表示意义，常常用于形象化的声明语义；background-image作为Css属性之一，图像只是起到背景装饰作用，不具备实际语义。

3.title和 alt属性分别有什么作用

title属性作为一种全局变量，可以作用于所有元素中，常用于显示元素的提示性信息。当鼠标移至元素时，会显示一段事先设定好的提示文本。
alt属性作为一种局部变量，作用于input（对于图像按钮）和img元素，常用于显示图片无法显示或禁止显示时的替代文本。

4.background: url(abc.png) 0 0 no-repeat;这句话是什么意思

background: url(abc.png) 0 0 no-repeat;属于背景样式，具体含义是设置一张图像地址位于abc.png和不产生平铺效果的图片，并且图像位置以元素左上角为基点图像的左上角到基点的距离在横纵坐标上不发生偏移。

5.background-size有什么作用? 兼容性如何? 常用的值是?

background-size是css3的新背景属性，规定背景图片的尺寸
该属性的兼容性通过查询caniuse网站如下：

常用属性值包括：

值	描述
length	设置背景的宽高，第一个值为宽度，第二个为高度，若只设置一个值，第二值默认为auto
percentage	以父元素的百分比设置背景的宽高
cover	将图像扩展至完全覆盖背景区域（图像尺寸等比例扩展）
contain	将图像扩展至宽高完全适应背景区域

这里有篇文章Background-size很重要较好的解释好演示了cover和contain的效果区别。

6.如何让一个div水平居中？如何让图片水平居中

div的水平居中可以使用margin或是position属性来设置；
图片通过img标签嵌套入div，再使用text-align：center属性来设置
具体演示如下：

代码地址

7.如何设置元素透明? 兼容性？

opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera;

filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1;
-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器;
-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器;
源自CSS透明属性详解

8.opacity和 rgba都能设置透明，有什么区别

opacity是Css属性的范畴，作用于元素（包括这个元素和元素内部的元素）；
rgba是属性值的范畴，作用于当前元素（仅仅是当前元素，不影响元素的内部元素）

上图两个div的下方banner分别使用opacity和rgba进行透明处理，代码如下：

.bg-1{
  background:black;
  width:100%;
  height:30%;
  position:absolute;
  bottom:0;
  left:0;
  opacity:0.3;
}
.bg-2{
  background:rgba(0,0,0,0.3);
  width:100%;
  height:30%;
  position:absolute;
  bottom:0;
  left:0;
}

不难发现，opacity设置0.3时作用于整个bg-1，并且内部的span元素的内容也会受影响；而rgba仅仅作用于background，内部的内容未受影响。

那么如果使用opacity同样实现rgba的效果，该怎么办呢？一个常用的方法是将banner和span分离成兄弟元素，banner使用z-index置于span下面

<div class="demo-3">
  <div class="bg-3"> </div>
    <div class="ctn">
    <span>opacity-revise</span>
      </div>
</div>

.demo-3{
  width:150px;
  height:100px;
  background:#ccc;
  margin:10px;
  position:relative;
  font-size:20px;
  color:white;
  text-align:center;
}
.bg-3{
  background:black;
  width:100%;
  height:30%;
  position:absolute;
  bottom:0;
  left:0;
  opacity:0.3;
  z-index:1;
}
.ctn{
  z-index:10;
  width:100%;
  height:30%;
  position:absolute;
  bottom:0;
  left:0;
}

代码题
使用CSS Sprite 把如下6张图标图片合并成一张图片，做出如下效果, 当 hover 时背景变色