前端CSS学习-Background背景相关
在CSS中 背景属性用于定义HTML元素的背景。
background主要设置一下五个属性:
- background-color // 设置元素的背景颜色。
- background-image // 把图像设置为背景。
- background-repeat // 设置背景图像是否及如何重复。
- background-attachment // 背景图像是否固定或者随着页面的其余部分滚动。
- background-position // 设置背景图像的起始位置。
1. background-color // 背景颜色
这个属性定义了元素的背景颜色, 它有三种定义方式:
- 十六进制 - 如："#ff0000"
- RGB - 如："rgb(255,0,0)"
- 颜色名称 - 如："red"
给文本设置background-color可以实现文本高亮效果.
2. background-image // 背景图像
这个属性定义了元素的背景图像, 使用方法
- 绝对路径写法：
- background-image:url("/img/3.jpg");
- 或者:
- background-image:url(/img/3.jpg);
- 相对路径写法：
- background-image:url(“../img/3.jpg”);
- 或者:
- background-image:url(../img/3.jpg);
当然也可以设置多个图片, 注意要用逗号来分隔: 比如
background-image:url('res/1.jpg'),url('res/2.jpg');
1.jpg会默认显示在2.jpg的上方
3. background-repeat // 设置图像如何平铺
默认的情况下, image的渲染方式是在页面的水平或者垂直方向平铺, 但是有时候这样会显得不协调, 这个时候就需要来通过设置
background-repeat 来设置背景图像的平铺方式.
我们可以这样设置.
1 background-repeat:repeat-x; // 在x轴的方向上平铺 2 3 background-repeat:repeat-y; // 在y轴发方向上平铺 4 5 background-repeat:repeat-x repeat-y; // 在x 和 y 轴方向上平铺 6 7 background-repeat:space; // 均匀的平铺背景图片，不会被裁剪 不会拉伸图片 8 9 background-repeat:round; // 水平和垂直平铺背景图片，拉伸图片以尽可能的填充背景，不会被裁剪 10 11 background-repeat:no-repeat; // 不进行平铺
4. background-position // 设置图像位置
图像默认显示的位置是top left即左上角, 这样满足不了我们设计的预期, 这时就需要来设置 background-position属性来设置图像的初始位置了.
怎么使用 就是 top right left bottom center 这样来组合设置, 如果只设置了某一个属性那么其它的默认是center.
这个属性还有两种设置方式:
1) 通过%来设置
background-position: 20% 30%; // 距离视图左边20%, 上面30%;
如果只是设置了一个比如:
bcakground-position: 20%;
那么就是距离左边20%; 而在水平方向上默认为居中显示.
2)通过px来设置
background-position: 200px 300px; // 距离视图左边界200个像素单位, 距离视图上边界300个像素单位
如果只是设置了一个比如:
bcakground-position: 200px;
那么就是距离左边200个像素单位; 而在水平方向上默认为居中显示.
当然也可以这样来设置:
1 background-position:left 10px bottom 20px; // 背景图片水平方向与左边缘相距10px，垂直方向与底部边缘相距20px
5. background-attachment // 设置图像是否随着页面滚动.
background-attachment: scroll // 背景图片随页面的其余部分滚动 默认设置
background-attachment:fixed // 背景图像是固定的
background-attachment:inherit // 指定background-attachment的设置应该从父元素继承
6. background-size ：设置背景图片的大小
默认值 auto auto // 背景图片的原始大小
示例:
1 background-size:100px; // 宽度为100px 高度为原始大小 2 background-size:100px 200px; // 宽度为100px 高度为200px 3 background-size:100px 50%; // 宽度为100px 高度为页面大小的50% 4 background-size:100% 100%; // 宽和高均为100% 占满整个视图
