css常见技巧-雪碧图、背景、居中、透明度

html-css021

css常见技巧-雪碧图、背景、居中、透明度,第1张

CSS sprites是指把网页中很多小图片（很多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。

作用：

作用：background-size设置 背景图像的大小尺寸 。

一、margin和width实现水平居中

优点： 实现方法简单易懂，浏览器兼容性强；

缺点： 扩展性差，只能针对已知宽度的div，无法自适应未知项情况。

)

二、inline-block实现水平居中方法

做点： 简单易懂，扩展性强；

缺点： 需要额外处理inline-block的浏览器兼容性。

1）、opacity作用于元素以及元素内的 所有内容的透明度 ，子元素会继承父元素的 opacity 属性。

2）、rgba()只作用于元素的颜色或其背景色，后代元素不会继承透明性,只是针对自己本身有效，无法使内部的所有元素透明。

1.css3新增的一个属性rgba,语法

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数| 百分数

A：透明度。取值0~1之间

2.设置透明度是不会被继承的，所以不用头疼继承的问题.字体透明度便设置成color:rgba(0,0,0,0.5)边框：border:5px solid rgba(0,0,0,0.5)或者背景都可以。

3.兼容性。支持ie9及以上的浏览器

4.css2中opacity制作背景色通常用到，可是要用他来制作边框色或都说前景色的话，那他就有心无力了。

5.二者区别opacity后代元素会随着一起具有透明性，所以我们Opacity中的字随着透明值下降越来越看不清楚。但是rgba不存在这种问题。

6.比如做一个背景的透明度，那么

<style>

.div{background:rgba(0,0,0,0.5)width:100pxheight:100pxcolor:red}

.div1{background:#000width:100pxheight:100pxcolor:rgba(255,255,255,0.5)}

</style>

<div class="div">

    我是文字

</div>

<div class="div1">

    我是变透明的文字

</div>

文字不会被影响的。

7.如果需要设置字体的透明度，可以对color的rgba属性进行设置。