CSS基础（14）- 更多的样式

本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录，仅作为个人记录以及阅读使用。

更多的样式

透明度

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

鼠标

cursor 默认auto（浏览器自行控制）、pointer小手…

cursor:url(“./img/target.ico”),auto; 还可以设置图片（后缀名为ico/cur），得加上后面的auto，就是告诉浏览器前面设置失效的话，可以用浏览器自带的

盒子隐藏

1. display：none; 不生成盒子，但是会影响其他盒子
2. visibility：hidden; 生成盒子，只是从视觉上移除盒子，盒子仍然占据空间（默认visible）

背景图

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

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

涉及的css属性

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

2. background-repeat

repeat/repeat-x/repeat-y/no-repeat

3. background-size

contain 完整显示到区域，且比例不变
cover 撑满区域，且比例不变
数值或比例 相对于盒子的大小，只写一个数值表示横向撑满，纵向按比例缩放；写俩数值则是横纵各自的比例

4. background-position 位置

预设值：left/right/top/bottom/center
也可以写数值或百分比

background-position: 50% 50%; 居中

eg: background-position :0px -23px;

雪碧图（精灵图） （sprite）

5. background-attachment 通常用来设置背景图是否固定

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

7. 速写（简写）属性
   background-position、background-size都是数值可能会冲突 浏览器要求先写位置再写尺寸 50% 50%/100%

background:url(“imgs/main_bg.jpg”) no-repeat 50% 50%/100% fixed #000;
… center/100% …
每个位置都可以不写

参考资料

1. 【渡一教育】袁进老师的html+css基础课程
2. 【渡一教育】袁进老师相关课程源代码