目录
背景的基本属性
背景颜色:background-color
通过“background-color”属性设置元素的背景颜色,属性值可以为对应颜色的用英文名称或rgb值或十六进制值。
英文名称:background-color: red; rgb值:background-color: rgb(0, 255, 128); 十六进制值:background-color: #bcbc12;
背景图片:background-image
我们不仅可以给元素设置背景颜色,还可以通过设置“background-image”属性来给它设置背景图片。图片的路径可以为本机地址,也可以为一个网络链接。然后,设置元素的宽高与图片的宽高相对应,就可以将图片完美的显示出来了。
div { width: 300px; height: 300px; background-image: url(图片路径); }
背景铺盖:background-repeat
背景铺盖主要跟图片背景一起用,因为纯色背景就没什么铺盖的必要了。
属性值 | 作用 |
---|---|
repeat | 背景图像在垂直方向和水平方向重复,默认。 |
repeat-x | 背景图像在水平方向重复 |
repeat-y | 背景图像在垂直方向重复 |
no-repeat | 背景图像只显示一次 |
inherit | 继承父元素的 background-repeat 属性值 |
背景大小:background-size
当我们所用的图片太大或者太小的时候,可以通过“background-size”属性来设置背景图片的大小。此时要记得等比例压缩或放大,否则画面不忍直视。
背景固定:background-attachment
通过“background-position”属性可以设置背景对页面滚动的反应。
属性值 | 作用 |
---|---|
scroll | 背景图片随着页面的滚动而滚动,默认。 |
fixed | 背景图片不会随着页面的滚动而滚动,此时图像定位时参照的就是页面了,可能不会在元素中显示出来或仅显示一部分。 |
local | 背景图片会随着元素内容的滚动而滚动。 |
inherit | 继承父元素的 background-attachment 属性值 |
背景定位:background-position
设置的背景图片默认是从元素的左上角开始的,但是我们可以通过设置"background-position"属性来移动图片的位置。注意,此处的定位是相对于元素的,相对于元素左上角的!
属性值 | 使用方法 |
---|---|
left top | 通过top、bottom、left、right、center五个英文单词两两组合来设置图像的位置 |
50px 50px | 通过数值来设置图片的位置,数值的单位是像素、百分比等 |
inherit | 继承父元素的 background-position 属性值 |
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div:nth-of-type(1) {
width: 1280px;
height: 720px;
background-size: 640px 360px;
background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
background-position: left bottom;
background-repeat: no-repeat;
background-color: yellow;
}
div:nth-of-type(2) {
width: 2560px;
height: 1440px;
background-color: red;
background-size: 1280px 720px;
background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
div:nth-of-type(3) {
width: 2560px;
height: 1440px;
background-size: 1280px 720px;
background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
background-repeat: repeat;
}
div:nth-of-type(4) {
width: 2560px;
height: 1440px;
background-color: red;
background-size: 1280px 720px;
background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
background-position: 50% 60%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
背景定位一
</div>
<div>
背景固定
</div>
<div>
背景铺盖及大小设置
</div>
<div>
背景定位二
</div>
</body>
</html>
总结
本文总结了一些背景设置的基本属性,基本能满足平时的使用需求,下一篇文章会涉及到背景的渐变设置,滤镜等。
文中若有不当之处,欢迎各位朋友批评指正。