css怎么引用本地背景图片?

html-css07

css怎么引用本地背景图片?,第1张

在 CSS 中引用本地背景图片可以使用 background-image 属性,并将图片路径指定为本地文件路径。例如:

body {

background-image: url('./images/bg.jpg')

}

其中 ./images/bg.jpg 是图片的本地文件路径,可以根据实际情况替换为其他路径。

请注意,如果您的 CSS 文件和图像文件不在同一目录中,则需要使用绝对路径或相对路径来指定图像文件的位置。

是的。这就相当于每次只显示一张大图的局部,大图只需要引用一次,然后就只需要改变它的显示位置及范围就可以显示这张大图的不同局部了。

换个角度来说,如果多张图片集成到一个大图中,那么网页就只需用http协议调用这张图片一次(如果分成多张图片就要多次调用),浏览器的缓存中也只会保存这一张图片,所以这是最节省网络资源的方式。

在html中某个div里加入背景图片的话,主要有以下几种方式:第一种: 在css文件里加入背景图片:在css里用url(../images/背景图2.jpg),在内联css和引入css中会由于html文件和css文件所处的相对位置不同,引入图片路径会有所不同。 如图:第二种:在html中引入:<div class="detail" style="background-image: url(../images/背景图1.jpg)"></div>,同理url()括号里是图片的引入路径。 如图:第三种:在div中加一张图片 <div class="detail" >                   <img src="../images/背景图1.jpg" alt="" style="width:100%height:100%"> </div> 如图:当图片小于背景区域大小时,图片会不断重复显示,如果不想图片重复显示,可以设置background-repeat,background-repeat有4个值,分别是repeat(代表重复显示)、no(代表不重复)、repeat-x(代表水平方向上重复)、repeat-y(代表垂直方向上重复) 当图片小于背景区域大小时,默认从左上角开始铺,如果想从任意位置开始铺,可以使用background-position属性,设置在x、y方向的偏移量。当图片大于背景区域时,只显示图片左上角。 当图片和背景区域大小一样大时,显示整张图片。