0
点赞
收藏
分享

微信扫一扫

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,设置一下背景颜色看看。


CSS background属性_html


好了,看了使用背景颜色的示例。下面再来看看使用背景图片。

background-image 设置背景图片地址


CSS background属性_背景颜色_02


设置一下第二个div的宽高,让背景图片显示好看一些。


CSS background属性_背景图片_03


那么能否设置背景图片不重复平铺呢?

background-repeat 设置背景图片如何重复平铺

设置​​background-repeat: no-repeat;​​则不会重复平铺。

CSS background属性_背景图片_04


如果需要平铺水平方向的内容呢?设置​​background-repeat: repeat-x;​​即可。


CSS background属性_html_05


如果需要平铺垂直方向的内容呢?设置​​background-repeat: repeat-y;​​即可。


CSS background属性_html_06


那么全部内容都要平铺呢?其实默认就可以了,设置​​background-repeat: repeat;​


CSS background属性_背景颜色_07


background-position 设置背景图片的位置


CSS background属性_背景颜色_08


从图中可以看出,如果直接设置​​background-position: left;​​则是左边居中。

CSS background属性_背景图片_09


如果在后面加上​​top​​则会设置到左上角的位置。

CSS background属性_html_10


CSS background属性_背景颜色_11


CSS background属性_背景颜色_12


CSS background属性_背景颜色_13


CSS background属性_html_14


CSS background属性_背景颜色_15


从上面几个图可以看到,通过​​background-position: right top;​​这些语句,可以调整背景图片的位置。

还有另一种方式就是可以使用像素来进行位置偏移的设定,如下:


CSS background属性_html_16


写完上来几个属性,如果每个都要单独写的话就比较费劲,下面介绍一下如何生成一行。

简写 background 属性示例

“background:cyan url(bg.jpg) repeat-x”,横向平铺盒子,盒子其他部分显示背景颜色“cyan”。


CSS background属性_背景图片_17


简写如下:


CSS background属性_背景颜色_18


“background:cyan url(bg.jpg) repeat-y”,纵向平铺盒子,盒子其他部分显示背景颜色“cyan”。


CSS background属性_html_19


“​​background: cyan url(bg.png) no-repeat left top;​​”,背景不重复,背景和盒子左上角对齐,盒子其他部分显示背景颜色“cyan”。


CSS background属性_背景颜色_20


简化如下:


CSS background属性_背景图片_21


“​​background: cyan url(bg.png) no-repeat left center;​​”,背景不重复,背景和盒子左中对齐,盒子其他部分显示背景颜色“cyan”。


CSS background属性_背景图片_22


“​​background: cyan url(bg.png) no-repeat right center;​​”,背景不重复,背景和盒子右中对齐,也就是背景图片的右边对齐盒子的右边,盒子其他部分显示背景颜色“cyan”。


CSS background属性_背景图片_23


背景图截图例子说明:

background-position的设置,可以在水平方向设置“left”、“center”、“right”,在垂直方向设置“top”、“center”、“bottom”,除了设置这些方位词之外,还可以设置具体的数值。

比如说,我们想把下边的盒子用右边的图片作为背景,并且让背景显示图片中靠近底部的那朵花:


CSS background属性_背景颜色_24


用上面中间那张图片作为左边那个比它尺寸小的盒子的背景,上面右边的实现效果设置为:“background:url(location_bg.jpg) -110px -150px”,第一个数值表示背景图相对于自己的左上角向左偏移110px,负值向左,正值向右,第二个数值表示背景图相对于自己的左上角向上偏移150px,负值向上,正值向下。

实现原理示意图:


CSS background属性_背景颜色_25

CSS background属性_背景颜色_26


对应代码:

<!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>

举报

相关推荐

0 条评论