天天看点

如何在html中加入背景,html中如何加入背景图片

在html中某个div里加入背景图片的话,主要有以下几种方式:

第一种:在css文件里加入背景图片:在css里用url(../images/背景图2.jpg),在内联css和引入css中会由于html文件和css文件所处的相对位置不同,引入图片路径会有所不同。

如图:

如何在html中加入背景,html中如何加入背景图片

html中有个div类名为detail

如何在html中加入背景,html中如何加入背景图片

在css文件中加一个background-image: url(XXX),      XXX是引入路径

第二种:在html中引入:

如图:

如何在html中加入背景,html中如何加入背景图片

第三种:在div中加一张图片

如何在html中加入背景,html中如何加入背景图片

如图:

如何在html中加入背景,html中如何加入背景图片

当图片小于背景区域大小时,图片会不断重复显示,如果不想图片重复显示,可以设置background-repeat,background-repeat有4个值,分别是repeat(代表重复显示)、no(代表不重复)、repeat-x(代表水平方向上重复)、repeat-y(代表垂直方向上重复)

当图片小于背景区域大小时,默认从左上角开始铺,如果想从任意位置开始铺,可以使用background-position属性,设置在x、y方向的偏移量。

当图片大于背景区域时,只显示图片左上角。

当图片和背景区域大小一样大时,显示整张图片。