-更多样式

更多的样式

透明度

1. opacity，设置整个元素的透明，取值是0 ~ 1，0为完全透明
2. 在颜色位置设置alpha通道(rgba)

鼠标

使用cursor设置

盒子隐藏

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

背景图

相对于视口

和img元素的区别

img元素属于html概念，背景图元素属于css概念

1. 当图片属于网页内容时，必须使用img元素
2. 当图片仅用于美化页面时，必须使用背景图

涉及的css属性

1. background-image
   背景图默认情况下，会在横坐标和纵坐标中进行重复

background-repeat: no-repeat;

2. background-size
   预设值:contain、cover，类似于object-fit
   百分比/数值(width，height)

3. background-position
   设置背景图的位置
   预设值: center、top、left、right、bottom等
   百分比/数值(相对位置)

spirit图: 截取一张图的某一部分
(一般用于截取小图标，小图标组合成一张大图标可以减少文件数量提高网页渲染效率)
先设置background-position为适当的数值使截取的部分位于左上角，然后调整width和height的值。

4. background-attachment
   通常用它控制背景图是否固定

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

6. 速写(简写)
   background: 注意: 位置/尺寸