html中如何加入背景图片

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方向的偏移量。

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

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

用Dreamweaver软件编辑

一、打开Dreamweaver,然后选中html,出来了一个html标准文档。

二、在标签里添加文件路径,语法如下:

这时,页面虽然充满了背景,但可以看出背景图片被填充了多次。

三、在里添加样式,代码如下:

你看,背景就充满页面了。

html设置背景图片的方法有:一种是用html的img标签进行插入,另一种是利用css的background标签插入。

HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11949946.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存