CSS background属性
仅供学习,转载请注明出处
属性解释
background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项:
- background-color 设置背景颜色
- background-image 设置背景图片地址
- background-repeat 设置背景图片如何重复平铺
- background-position 设置背景图片的位置
- background-attachment 设置背景图片是固定还是随着页面滚动条滚动
实际应用中,我们可以用background属性将上面所有的设置项放在一起,而且也建议这么做,这样做性能更高,而且兼容性更好,比如:“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”,这里面的“#00ff00”是设置background-color;“url(bgimage.gif)”是设置background-image;“no-repeat”是设置background-repeat;“left center”是设置background-position;“fixed”是设置background-attachment,各个设置项用空格隔开,有的设置项不写也是可以的,它会使用默认值。
下面手写例子来使用一下上面的参数
background-color 设置背景颜色
首先写一个div,设置一下背景颜色看看。
好了,看了使用背景颜色的示例。下面再来看看使用背景图片。
background-image 设置背景图片地址
设置一下第二个div的宽高,让背景图片显示好看一些。
那么能否设置背景图片不重复平铺呢?
background-repeat 设置背景图片如何重复平铺
设置background-repeat: no-repeat;
则不会重复平铺。
如果需要平铺水平方向的内容呢?设置background-repeat: repeat-x;
即可。
如果需要平铺垂直方向的内容呢?设置background-repeat: repeat-y;
即可。
那么全部内容都要平铺呢?其实默认就可以了,设置background-repeat: repeat;
background-position 设置背景图片的位置
从图中可以看出,如果直接设置background-position: left;
则是左边居中。
如果在后面加上top
则会设置到左上角的位置。
从上面几个图可以看到,通过background-position: right top;
这些语句,可以调整背景图片的位置。
还有另一种方式就是可以使用像素来进行位置偏移的设定,如下:
写完上来几个属性,如果每个都要单独写的话就比较费劲,下面介绍一下如何生成一行。
简写 background 属性示例
“background:cyan url(bg.jpg) repeat-x”,横向平铺盒子,盒子其他部分显示背景颜色“cyan”。
简写如下:
“background:cyan url(bg.jpg) repeat-y”,纵向平铺盒子,盒子其他部分显示背景颜色“cyan”。
“
background: cyan url(bg.png) no-repeat left top;
”,背景不重复,背景和盒子左上角对齐,盒子其他部分显示背景颜色“cyan”。
简化如下:
“
background: cyan url(bg.png) no-repeat left center;
”,背景不重复,背景和盒子左中对齐,盒子其他部分显示背景颜色“cyan”。
“
background: cyan url(bg.png) no-repeat right center;
”,背景不重复,背景和盒子右中对齐,也就是背景图片的右边对齐盒子的右边,盒子其他部分显示背景颜色“cyan”。
背景图截图例子说明:
background-position的设置,可以在水平方向设置“left”、“center”、“right”,在垂直方向设置“top”、“center”、“bottom”,除了设置这些方位词之外,还可以设置具体的数值。
比如说,我们想把下边的盒子用右边的图片作为背景,并且让背景显示图片中靠近底部的那朵花:
用上面中间那张图片作为左边那个比它尺寸小的盒子的背景,上面右边的实现效果设置为:“background:url(location_bg.jpg) -110px -150px”,第一个数值表示背景图相对于自己的左上角向左偏移110px,负值向左,正值向右,第二个数值表示背景图相对于自己的左上角向上偏移150px,负值向上,正值向下。
实现原理示意图:
对应代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
border: 1px solid #000;
margin: 50px auto;
background-color: cyan;
background-image: url(location_bg.jpg);
background-repeat: no-repeat;
background-position: -107px -153px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2019年全套Java、Android、HTML5前端、Python、大数据视频,价值数万资源大放送
寻找资源的地址如下: