9-2.CSS常见技巧

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

1、css sprite是一种图片处理方法，就是将很多零散的图片拼接成一张大的图片，然后应用到背景图片中。它使用css的"background-image,background-repeat,background-position"组合进行背景定位。background-position使用数字能够精确的定位背景图片的位置。
2、因为每张图片URL都会向服务器发送请求，拖慢网速，影响页面加载速度，而css sprite是一张合成的大图，只需向服务器请求一次，所以提高了页面的性能，防止页面出现卡顿的问题，而且每次加载都是在缓存里面。
3、图片是在css中定义，不是image标签，它适用于一些内容不变的小图片。
参考雪碧图
例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .icon{
        border:1px solid;
        height:100px;
        width: 100px;
        background:url(http://static.360buyimg.com/devfe/toolbar/1.0.0/css
/i/toolbars.png) 0 0 no-repeat;
    }
    .div1{
        background-position: 36px 3px;
        height: 50px;
    }
    .div2{
        background-position: 76px 32px;
    }
</style>
</head>
<body>
    <div class="icon div1">
        <a href="#">小车</a>
    </div>
    <div class="icon div2"></div>
</body>
</html>

Paste_Image.png

雪碧图在线合成工具
国外的雪碧图在线合成工具css sprite
优点：自动合成，可以设置属性。缺点：文件必须一个个地去选择导入，不能够批量导入
参考：sprite工具

还有一种减少网络请求的方法是把图片转换成base64的字符串，它适用比较小的图片，对网页实时性有要求的

二、img标签和CSS背景使用图片在使用场景上有何区别？

img是html结构当中的一部分；background-image是css中的一种样式，它在css中定义。

对于固定不变的内容，每个人看到的都是一样的情况，比如说图标，这时可以使用背景图片。对于一些可变的内容（每个用户看到的不一样，或者不同时间打开网站时看到的不一样），图片和内容是相关的，这时用img。

Paste_Image.png

三、title和alt属性分别有什么作用？

alt属性
替换文字（alt text）是用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息，它在图片的位置显示内容。所以替换文字是用来替代图像而不是提供额外说明文字的。它只能用在img、area和input元素中（包括applet元素）

title属性
title作为属性时，用来为元素提供额外说明信息。可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签，但是并不是必须的。当鼠标放置在选定元素时，大部分可视化浏览器会显示title的提示信息。title属性的优先级高于alt text。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    <img src="http://img30.360buyimg.com/da/jfs/t3172/96/21316060/77028
/1c901ad7/57a01cbfNacd3a044.jpg" title="省油的，环保的">
    <img src="http://img30.360buyimg.com/da/jfs/72/96/21316060/77028
/
1c901ad7/57a01cbfNacd3a044.jpg" alt="汽车">
</body>
</html>

Paste_Image.png

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

1.这里是设置背景图片，url里面是背景图片的地址，可以是绝对地址或相对地址；"0 0"说明背景图的位置相对于元素的左上角向x轴和y轴的偏移量都是0；no-repeat是指背景图片在水平方向和垂直方向都不重复。
2.背景图片定位

Paste_Image.png

①设置两个值，前面的是相对x轴方向定位(水平)，后面的相对于y轴方向定位(垂直)。如果只设置一个值，这个值是默认是在x轴方向的定位，y轴方向默认的是居中对齐
②原点是不会动的，移动的是图片 X坐标为正则图片左上角向右平移，为负则图片左上角向左平移；Y坐标为正则图片左上角向下平移，为负则左上角向上平移
③x y也可以用“top、bottom、left、right、center”这五个对齐方式来表示。x y等于center的时候表示居中对齐，其他的表示背景图片相对于在容器上下左右对齐。
④X Y坐标除了可以用数字表示，还可以用百分比表示。用百分比的算法是：
X：（容器的宽度-图片的宽度）乘以（X方向的百分数）
Y：（容器的高度-图片的高度）乘以（Y方向的百分数）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    div{
        border: 1px solid;
        width: 200px;
        height: 200px;
        background:url(http://f.hiphotos.baidu.com/zhidao
/pic/item/5366d0160924ab188229104f33fae6cd7b890b8e.jpg) no-repeat;
        background-size: 100px 100px;
        /*(200px-100px)*100%=100px
        (200px-100px)*10%=10px*/
        background-position: 100% 10%;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

Paste_Image.png

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

background-size作用是设置背景图片尺寸大小
用can i use查看兼容性
注意：ie8不支持，只有ie9以上才支持

Paste_Image.png

常用的值

Paste_Image.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .img{
        display: inline-block;
        border:1px solid;
        width: 300px;
        height: 300px;
        background:url(http://d.hiphotos.baidu.com/image
/pic/item/38dbb6fd5266d01622b0017d9f2bd40735fa353d.jpg) 0 0 no-repeat;
    }
    .test1{
        background-size: 50px 50px;
    }
    .test2{
        background-size: 50%;
    }
    .test3{
        background-size: cover;
    }
    .test4{
        background-size: contain;
    }
</style>
</head>
<body>
    <div class="img test1"></div>
    <div class="img test2"></div>
    <div class="img test3"></div>
    <div class="img test4"></div>
</body>
</html>

Paste_Image.png

多重背景
设置多重背景，可以设置用逗号分隔的多个值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    div{
        border: 1px solid;
        width: 400px;
        height: 400px;
        background:url(http://d.hiphotos.baidu.com/image/pic/item
/38dbb6fd5266d01622b0017d9f2bd40735fa353d.jpg),
url(http://s2.nuomi.bdimg.com/upload/deal/2014/1/V_L/623682-1391756281052.jpg);
        background-repeat: no-repeat;
        background-size: 50px 50px,50% 50%;
        background-position: 50px,right bottom;
        background-color: #ccc;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

Paste_Image.png

六、如何让一个div水平居中？如何让图片水平居中？

1.div是块块级元素，要让它水平居中，需要让它外边距左右相等，设置为
div{margin：0 auto；}
2.图片是行内元素，要让它水平居中，需要让它的父容器为块级元素且设为

text-align:center;它的作用是让里面的行内元素相对于自己的父容器居中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    div{
        border:1px solid;
        width: 400px;
        height: 400px;
        margin:0 auto;
        text-align: center;
        display:block;
    }
    span{
        display: table-cell;
        border: 1px solid red;
        width: 200px;
        height: 200px;
        vertical-align: middle;
    }
    img{
        width:100px;
        height: 100px;
    }
</style>
</head>
<body>
    <div>
        <span>
            <img src="http://d.hiphotos.baidu.com/image
/pic/item/38dbb6fd5266d01622b0017d9f2bd40735fa353d.jpg" alt="小狗">
        </span>
    </div>
</body>
</html>

Paste_Image.png

七、如何设置元素透明? 兼容性？

用opacity属性可以设置元素透明度。透明度在0~1之间，0表示完全透明，1表示完全不透明。

透明分为背景图透明和整体透明。整体透明的话，比如说设置div的透明度，它里面包含所有东西会透明，如果给背景图设置透明度的话，它只影响背景图。
ie8是部分支持

Paste_Image.png

八、opacity和 rgba都能设置透明，有什么区别？

rgba(r,g,b,a)。rgb表示的是颜色;A：Alpha透明度,取值0~1之间。

rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。
opacity会继承父元素的 opacity 属性，而rgba()设置的元素的后代元素不会继承透明性,只是针对自己本身有效，无法使内部的所有元素透明。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    div{
        border: 1px solid blue;
        width: 200px;
        height: 200px;
        text-align: center;
        display: inline-block;
    }
    .opacity{
        background: red;
        opacity: 0.5;
    }
    .rgba{
        background:rgba(255,0,0,0.3);
    }
</style>
</head>
<body>
   <div class="opacity">这是opacity的测试</div>
    <div class="rgba">这是rgba的测试</div>
</body>
</html>

Paste_Image.png

可以看出设置opacity不仅改变背景颜色的透明度，还改变了它里面的内容，边框透明度。设置rgba只改变了背景色的透明度，它的内部的内容，边框都不变。

最后编辑于：2018.07.06 07:12:56

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,015评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,262评论 1赞 292
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,727评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,986评论 0赞 205
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,363评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,610评论 1赞 219
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,871评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,582评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,297评论 1赞 242
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,551评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,053评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,385评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,035评论 3赞 236
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,079评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,841评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,648评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,550评论 2赞 270

9-2.CSS常见技巧

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

二、img标签和CSS背景使用图片在使用场景上有何区别？

三、title和alt属性分别有什么作用？

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

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

六、如何让一个div水平居中？如何让图片水平居中？

七、 如何设置元素透明? 兼容性？

八、opacity和 rgba都能设置透明，有什么区别？

推荐阅读更多精彩内容

七、如何设置元素透明? 兼容性？