周报二

更多样式

A. 透明度

1. opacity

设置整个元素（包括文字）透明，它的取值范围为0–1
0：透明。
1：不透明。

2. rgba

在颜色位置设置alpha通道
rgba（0,0，0,0，）

3. background-clip

background-clip: padding-box 只填充paddin盒
.
.

B. 鼠标样式

cursor

cursor : url(路径（注：图片的后缀为.cur 或 .ico）),auto（注：在图片无法显示时默认使用浏览器样式）;

C. 盒子的隐藏

1. display

display：none(不生成盒子。)（改变其他盒子的位置）

2. visibility

visibility : hidden(生成盒子只是从视觉上移除盒子，盒子仍然占据空间)

D. 背景图

img元素是HTML的概念，背景图属于css的概念

1. img

当图片属于页面内容时，必须使用img元素。（如广告）

2. 背景图

当图片用于网页的美化时，必须使用背景图

E. background

1. background-img

background-img：url（“路径”）；

2. background-repeat

background-repeat：no-repeat（注：不重复）

上式即：
background-repeat-x: no-repeat
background-repeat-y: no-repeat

background-repeat : repeat-x(只在x轴重复)
background-repeat : repeat-y(只在y轴重复)

3. background-size

预设值 contain，cover。类似于object-fit
还可以是数值或百分比

例：

1. background-size :100%(指横向上撑满，纵向上按比例缩放)
2. background-size :100% 100%(指横向上撑满，纵向也撑满，但图片比例变化)
3. background-size :400px 200px（宽高）

4. background-position

设置背景图的位置。
预设值 left，bottom, right, top, center
还可以是数值或百分比
例：

1. background-position :center(横纵向居中)
2. background-position：center top;(横居中，纵靠上)
3. background-position：10px 10px;(盒子内的相对位置)
4. （**雪碧图（精灵图：spirit）**提高浏览器的刷新）

5. background-attachment

通常用它控制背景图是否固定：background-attachment：fixed（固定于视口）

6.背景图与颜色混用

例如靠近页脚的图越偏底部颜色越深可以和body颜色混用（好看）

7. 速写

background;url(“路径”) no-repeat 100% 100% / 100% fixed #000
… … … … … … … … … … … …position … …size …attachment … color(顺序)