html中如何加入背景图片

html-css019

html中如何加入背景图片,第1张

在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方向的偏移量。当图片大于背景区域时,只显示图片左上角。 当图片和背景区域大小一样大时,显示整张图片。

visual studio简称为vs。下面,我们来看看HTML中怎么插入图片作为背景图片吧。

打开vs

打开visual studio软件,并新建一个文件夹为img,把图片粘贴到文件夹中,如下图所示:

<body style=" background:url(img/img01.jpg)">

设置背景图片的代码为 style=" background:url(img/img01.jpg)",如下图所示:

在浏览器中查看

右击【HTMLPage.htm】,选择【在浏览器中查看】,如下图所示:

预览效果

在浏览器中的预览效果如下图所示:

01

先做一个简单的HTML页面,页面里只有一个div和一段文字。

02

要添加整个页面的背景图片,我们就只能把背景加到body标签里了,所以我们在body里添加一个样式,叫‘bg’

03

然后定义这个bg的样式规则,主要就是添加background-image样式,就是添加背景图。

background-repeat是让背景图铺满整个页面。

04

看下页面的效果,可以看到现在整个页面都铺满了蝴蝶这张图片了。为了更好的效果,大家可以更换一张更好看的背景图。