背景之 background
作者: dkvirus 发表于: 2018-06-17 23:25:00 最近更新: 2018-08-01 22:06:19

1. background-image

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
div {
width: 90%;
height: 500px;
margin: 30px auto;
border: 3px solid red;
background-image: url(./look.png);
}
</style>

<body>
<div></div>
</body>

./look.png 是我本地的一张图片,如下图:

look.png

设置这张图片作为 div 的背景图片,因为图片自身的宽高很小,不足以占满 div 的宽高,默认水平和垂直方向会重复显示,如下图:

background图2

2. background-repeat

该属性用来设置背景图片是否重复显示,默认值是 repeat。

取值 说明
repeat-x 水平方向重复显示
repeat-y 垂直方向重复显示
repeat 水平方向和垂直方向都会重复显示
no-repeat 显示图片原本大小,即便图片宽高小于容器div宽高,也不会重复显示
round 表示背景图像自动缩放直到适应且填充满整个容器,见下左图
space 表示背景图像以相同的间距平铺且填充满整个容器或某个方向,见下右图

关于 round 和 space 实际页面效果,见下图。

左图 round 图片自动缩放刚好占满容器div宽高(红框区域),右图 space 图片之间留有空白。

background图3

3. background-size

该属性用来设置背景图片大小。

取值 说明
auto 默认值。显示图片本身大小
cover 图片宽高自动拉伸,直至全部填充容器宽高,这样会改变图片原本宽高比,造成图片变形
contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等
长度值或百分比 设置一个值表示设置图片的宽度,高度自适应;设置两个值表示分别设置图片的宽度和高度

关于 auto、cover 和 contain 三个值的页面效果,见下图。

左图 auto 为图片本身大小;中间图 cover 拉伸图片宽高直至等于容器宽高;右图 contain 等比放大图片,当图片高度与容器高度一样时停止缩放。

background图4

4. background-position

该属性设置背景图片的位置。背景图片相对于容器 div 的定位为 position: absolute,所以可以使用 bottom、left 等方位词。默认定位为 0% 0%,也就是距离容器顶部 0px,距离容器左边 0px。

取值 说明
默认值 0% 0%,位于容器 div 左上角
设置一个值 则该值作用在横坐标上, 纵坐标默认为50%(即center)
设置两个值 则第一个值作用于横坐标, 第二个值作用于纵坐标
设置三个/四个值 偏移量前必须有关键字, 如: background-position: right 20px bottom 30px;
首页
友链
归档
dkvirus
动态
RSS