更多的样式

更多的样式

透明度

1. opacity，设置整个元素的透明度，取值为0 ~ 1
2. 在颜色位置设置alpha通道（rgba），取值为0 ~ 1

鼠标

使用cursor设置，详见mdn
可以用.ico/.cur文件设置鼠标为一个图片

cursor:url("图片路径"),auto;

盒子隐藏

1. display:none,不生成盒子
2. visibility:hidden,生成盒子，只是从视觉上移除盒子，盒子依然占据空间。

背景图

与img元素的区别

img元素是属于html概念

背景图属于CSS概念

1. 当图片属于网页内容时，必须使用img元素；
2. 当图片仅用于美化页面时，必须使用背景图。
   （广告建议使用img）

涉及的CSS属性

1. background-image

写法：

    background-image:url("图片路径")；

2. background-repeat

默认情况下，背景图会在横坐标和纵坐标之间重复

四个属性：

repeat（默认）：横向纵向都重复
repeat-x:横向重复
repeat-y:纵向重复
none:不重复

3. background-size

预设值：

cover：保证图片撑满区域，保证比例不变
contain：保证图片完整显示，比例不变

数值或百分比：

百分比：图片宽高比例
数值：图片宽高大小

4. background-position

设置背景图的位置。

预设值：center/left/right/top/bottom

    background-position:left center

↑横向靠左，纵向居中

数值或百分比：

数值：相对位置

    background-position:10px -15px

↑距离盒子左边10像素，上面-15像素

雪碧图（精灵图）（sprite）

工程中通常会将页面的所有图标都汇聚在一张图片上，这张图片就叫做雪碧图。

从雪碧图中取出需要的图标，先设置雪碧图为background-image，设置background-repeat为no-repeat，
之后调整background-position为合适位置，最后设置background-size即可。

5. background-attachment

预设值：fixed 设置背景图为相对于视口的，类似于固定定位。

6. 背景图和背景颜色混用

7. 速写（简写）属性 background

background: url(图片路径) no-repeat 50% 50%/100% fixed #008c8c;

注：使用background速写属性时，“/”前面的数值是位置，“/”后面的是尺寸 。