css2--背景
2021-06-05 19:30
标签：场景 otto 重复 no-repeat ima top 样式 简写 通过 ## CSS2 背景 ##### background-image 设置背景图片 ##### background-repeat 设置背景图片的重复方式 - repeat 默认值. 使背景图片在水平和垂直两个方向重复.以铺满元素 ##### background-position 设置背景图片显示位置 ##### background-attachment 设置背景图片是否随屏幕滚动 - scroll 默认值. 背景会随屏幕滚动 ##### background 简写 ##### img标签和background-image的区别 - 使用img的场景: 重要的页面图片元素.例如 网站logo,商品图片 2.使用背景图引入图片,网页加载后,或者与网页一起加载.不会影响页面的加载速度 - 使用背景图片的场景:非重要的页面图片元素,例如 小图片 css2--背景 标签：场景 otto 重复 no-repeat ima top 样式 简写 通过 原文地址：http://www.cnblogs.com/huifang/p/7341756.html
##### background-color 设置背景颜色
- ````background-image：url（"图片的路径"）;````
- repeat-x 水平方向重复
- repeat-y 垂直方向重复
- no-repeat 图片不重复
- 默认背景图片是从左上角开始显示.
- 设置方式:
1. 通过位置的关键字来设置背景图片的位置
- left top right bottom center
- 使用这些关键字两两组合设置图片位置
- 如果只设置一个关键字则第二个默认为center
2. 可以指定一个水平方向和垂直方向的偏移量来设置图片位置
- background-position：x偏移量 y偏移量
- x偏移量：正值 向右移动；负值 向左移动
- y偏移量：正值 向下移动；负值 向上移动
- fixed 背景相对于窗口固定定位.不会随屏幕滚动
- 使用场景: 网页的整体背景
- 可以同时设置所有的背景相关的样式
- 对样式的编写顺序和数量没有任何要求
- 多个背景图片之间可以用逗号隔开
- ````background：red url() no-repeat top center````
1.使用img元素引入图片,图片与网页同步加载,如果网页过大,影响页面加载速度
上一篇：CSS基本知识点(01)
下一篇：JS--ECMAScript