背景颜色
- 如何给标签设置颜色
- CSS中的background-color属性就是设置标签的背景颜色
- 如何取值？
- 具体的单词：red black等
- rgb：rgb(0,244,233)
- 十六进制：#000ffff
- rgba(0,233,233,1)
背景图片
- 如何设置背景图片？
- CSS中的background-image：url()属性就是设置标签的背景颜色
- 如何取值？
- url（）括号中是图片地址：网络地址或本地地址
- 注意：
- 1️⃣图片的大小如果比标签尺寸小，会自动水平和垂直填充
- 2️⃣如果网页上出现图片，浏览器会发生网络请求去获取图片----可以在开发者工具中的Network栏查看
背景平铺属性
- background-repeat：取值如下
- 默认情况下是repeat -- 垂直水平都平铺
- no repeat -- 不平铺
- repeat-x：水平方向平铺
- repeat-y：垂直方向平铺
- 应用场景
- 若图片很大，不利于用户体验，下载的时候会很慢，所以可以利用一个小图片且有规律的图片可以进行平铺，可以加速浏览器访问速度
背景定位
- 一个标签可以同时设置背景图片和背景颜色，图片会覆盖在背景颜色上面，左上角
- 如何控制背景图片的位置？
- CSS中有background-position：水平方向 垂直方向 -- 用来控制背景图片位置
- 取值（可自行搭配）
- left top--左上角
- right top--右上角
- left bottom--左下角
- right bottom--右下角
- center center--正中间
- 也可以写数值，但是一定要加上单位px；也可以是负值
- 应用场景
- 一般会用一张很大的图片，由于不同设备分辨率会不同
- 可以利用position一直设置center top，则一直可以显示图片最中间部分，两边信息不重要
背景属性缩写格式
- background：背景颜色 背景图片 平铺方式 关联方式 定位方式
- background:red url() no-repeat left bottom;
- 注意点
- 1️⃣background中任何一个属性都可以省略；例如不设置颜色
- 关联方式：背景图片是否跟随滚动
- background-attachment
- fixed：不会随着滚动条滚动
- scroll：随着滚动条滚动 -- 默认
- 快捷键
- bg+
- div.类名$*个数 --- 生成类名编号递增的div
背景图片和插入图片
- 背景图片：
- 1️⃣仅作为装饰，不会占用父控件的存储空间
- 2️⃣有定位属性，可以控制图片位置
- 插入图片：
- 1️⃣会占用父控件的存储空间
- 2️⃣没有定位属性
- 3️⃣img语义强于背景图片，若图片想被搜索引擎收录，推荐使用插入图片
精灵图
- 产生原因：由于浏览器请求数据过程，若网页图片过多会多次请求，会增大服务器压力；使用精灵图可以减少请求次数，降低服务器压力
- 精灵图是指的一个由多个小图片合成的图片，是一种图像合成技术
- 如何使用？可以使用图片定位找到所需的部分
- 推荐工具：fireworks
- 1️⃣打开图片
- 2️⃣右侧锁定图片---一定要做，以防图片错乱
网友评论