正文 

当前位置： 首页 > java > java教程

html页面插入图片，使用background还是img标签

clearYang      2022-02-14     774

关键词：

　　很多新手在刚开始学习HTML标签的时候，老师一定会教你

<img src="xxx.png"/>

　　这种引入图片格式，第二天学习css的时候，老师又会教你给div等元素添加背景图片，

div {
     background-image: url(xxx.png);
}

　　那么这两种方式究竟孰优孰劣，分别应该在什么情况下使用呢？今天我在这里就给大家详细讲解一下：

　　关于img标签，我们要知道，它除了src路径以外，还有两个属性，一个是alt，一个是title

<img src="xxx.png" alt="" title=""/>

　　首先我们讲一下title，它的作用是什么呢？我们来看一下，当我们在body中写入以下代码的时候，

<img src="img/柯基.jpg" alt="" title="Hello，World！"/>

　　打开浏览器，会显示对应的那张图片，title里面写的"Hello，World！"是不显示的，只有当我们的鼠标放到图片上暂留的时候，鼠标上才会出现提示性文字如下图：

　　title属性是对元素的注释说明和额外补充，当鼠标放到文字或图片上时候，会显示title对应的文字。要注意的一点是，title这个属性并不是img标签特有的，加给button、div等其他标签都是可以的，我曾经看过一些文章，作者提议给网页中所有的标签都加上title属性，这样将来用户把鼠标放到每个按钮、图片、文字上，都有title提示，但是我看响应附和者寥寥，为什么呢，太麻烦了呗，你作为一个程序员你愿意多此一举吗，况且此举还会增加代码体积。
　　接下来我们再说说alt属性，alt其实就是你windows通用键盘空格左右的那个键，也是你吃鸡（PC端）的时候，可以自由转头的那个键，它的本意是替换的意思，alt属性在img标签里面是一个必须属性，其作用是当我们的图片，在用户的网络条件差、路径错误或者浏览器禁用图像等情况下，用户看不到这张图片，alt内的解释性文字会显示出来，使得用户即使看不到图片，也不会影响到对整个页面的浏览，如下图：
　　而且alt属性里的值还会被搜索引擎抓取到，比如你现在在百度搜索柯基，那么我们网页当中的这张图片就可能会被百度图片给抓取到，如下：

　　搜索引擎真的会分辨你网页当中的图片是不是柯基犬吗？人工智能有这么强大？可以智能识图？并不是的，搜索引擎是通过识别你网页当中的alt属性，来辨别本图片是不是它所要抓取的。我们的网站肯定是希望搜索引擎抓取到我们，这样我们的浏览量就会加大，我们的流量就会更多，我们就能赚取更多的广告费，我们就会更有银子。

　　其次，还有一个原因，img加载更快对于我们一篇HTML文档来说，浏览器对文档的加载是从上往下的，我们的css样式是在style标签内，当我们的浏览器加载到style标签的时候，它就会停下，跳过去，继续加载HTML，HTML加载完成后，才会继续加载css样式表，否则的话，假如我们在style标签内写了.div1{width:100px;}这时候浏览器并没有加载到body，因为我们的style标签是在head内，是在body上面的，这时候浏览器就无法找到div1并给其设置宽度。所以，如果论加载速度，还是body中的img标签加载更快。

　　最后呢，还有一个原因，是从用户体验角度来讲的。如果你在body 中通过img标签引入一张图片，那么用户在浏览网页的时候，是可以直接在图片上右键，然后另存为，把图片保存下来，但是background是不可以的；

　　还有一种情况比较少见：针对盲人用户，盲人用户眼睛无法直接看到网页，但是又有上网的需求，这时候，患者就可以借助一些读屏软件来浏览我们的网页，这时候问题来了，读屏软件可以阅读文字，可是它怎样阅读我们的图片给患者听呢？这是一个问题，所以这时候我们之前提到的alt属性的作用就来了，读屏软件可以直接阅读图片的alt属性值，从而使盲人用户看不到图片，也可以知道这里显示的是什么。

 　　所以，综上所述，一般情况下，在我们网页中主体用到的图片，尽量用img标签引入是最好的，但是这也并不是绝对，在网页中用到的logo等图标，我们一般用background来显示，或者该图片本就是背景图，我们就一定使用background。
 
 

 

html中怎么插入背景图片？如何设置背景图片大小？

可以使用html的background-image标签和background-size实现插入背景图片和控制图片大小。具体步骤如下：需要准备的材料分别是：电脑、浏览器、ultraedit。1、在ue编辑器中新建一个空白的html文件。2、在ue编辑器中输入以下html代码。3、... 查看详情

css基础入门d2

...页面的背景图片插入在类标签body中直接插入，例如：body{background-image:url(../Day02-HTML/html/海贼王02.jpg);}还可以调试它的效果，是否重复，是否随页面滚动，调动位置。例如：body{ background-image:url(../Day02-HTML/html/海贼王02 查看详情

外联css中，background-image的图片相对地址是相对css文件还是相对使用的使用外联css的html文件

外联css中，background-image的图片相对地址是相对css文件还是相对使用的使用外联css的html文件：例：有一外联css为style.css内容如下bodymargin:0px;padding:0px;font-size:12px;color:#333333;line-height:18px;text-align:left;font-family:"宋体";background:ur... 查看详情

dw代码中插入背景图片的代码是啥?

...。参考技术A在网页开发中插入北京图片使用的css代码是background，其用法为：background简写属性在一个声明中设置所有的背景属性，可以设置如下属性：background-color；background-position；background-size；background-repeat；background-origin；bac... 查看详情

h5背景图怎么显示

...有两种方法，一种是用html的img标签，另一种是利用css的background标签插入。具体操作是首先新建一个html文件，写入两个div，分别用来演示两种方法插入标签。2、首先是用html标签插入图片，这里直接在img标签中使用src属性就可以... 查看详情

html中怎么插入背景图片如何设置背景图片大小

CSS里设置这两个参数：背景图background:url(/*图片路径*/)repeat-x/*平铺方式*/;尺寸:backgroun-size:100%100%。其实大多数的HTML编辑器操作都是一样的，今天我就以Hbuilder来讲解，首先新建一个HTML页面，这里命名为“new_file.html”。接着给标... 查看详情

background-image中url使用绝对地址不显示图片，相对地址要怎么使用，用的是内部样式

background-image中url使用绝对地址不显示图片，相对地址要怎么使用，用的是内部样式。图片有点不清楚，谅解下！参考技术A注意引号图片和网页在平级用:"ok.jpg"网页和存放图片文件夹平级:"./ok.jpg"以此类推。注意加... 查看详情

background背景认知(代码片段)

background背景 　　背景颜色/*背景颜色为红色*/pbackground-color:ren;网页背景不仅可以设置颜色还可以插入图片/*为背景插入图片*/bodybackground:url("./1.jpg")/*括号中可以不加引号,但是加上还是好的　　　　　　备注标签请求外面资源... 查看详情

html页面比较长，body里的background图片比较短，如何设置属性使图片以拉伸方式占满页面？

...设成100%，绝对定位，当背景图参考技术A<bodystyle="background-repeat:repeat"> 参考技术BCSS里才f可以3。yb 查看详情

html中，怎么让背景图片充满整个页面

...二、在<body>标签里添加文件路径，语法如下：<bodybackground="文件路径">这时，页面虽然充满了背景，但可以看出背景图片被填充了多次。三、在<body>里添加样式，代码如下：style="background-repeat:no-repeat;backgr... 查看详情

0016css背景：background

...图要设置元素的宽高才可见。】4.1背景颜色(color)语法：background-color:颜色值;默认的值是transparent透明的4.2背景图片(image)语法：background-image:n 查看详情

css盒子模型外边距③(插入图片|插入图片位置移动-修改外边距|背景图片|背景图片移动位置-修改背景位置background-position)(代码片段)

文章目录一、插入图片1、简介2、代码示例二、背景图片1、简介2、代码示例一、插入图片1、简介插入图片:插入图片方式:在HTML中,使用<img>标签可以插入一张图片;插入图片适用场景:显示内容,按钮,一般都使用插入图片的方式... 查看详情

如何在html中插入图片

...文本内容。在同一张图片上点击不同的位置链接到不同的页面上使用map，和area元素（map是area的父元素）加上id或者name是为了解决兼容性。shap形状分类：圆形，矩形，多边形，（点击区域的形状）。href：形状的链接地址。coords... 查看详情

img和background-image优劣比较

一.简单来说，img是内容部分的东西，css的background-image是修饰性的东西。img------从页面元素来说，如果是页面中的图片是作为内容出现的，比如广告图片，比如产品图片，那么这个必然是用img了，因为这个是页面元素内容。页面... 查看详情

html5手机页面背景图片自适应大小问题

我把背景图片设为background-size:cover;因为页面中有文字的原因，在手机屏幕较宽的机型上会出现页面最下部分没有背景，如果设置为background-size:100%100%;，在屏幕较小的机型上不能显示全部内容，导致需要下拉的部分没有背景，怎... 查看详情

前端页面的性能优化

...使用图片精灵将大量的背景图片整合到一张图片，然后用background-image和background-position控制背景图片的位置定位到要显示的图片，适用于数量多，体积小的图表等图片。行内图片（base64格式）将图片转化为base64格式直接嵌入html内... 查看详情

css背景图片

1.背景图片插入代码格式：background-image:url（）；括号内填写图片路径2.背景图片设置大小代码格式：background-size:宽、高3.背景图片设置不平铺代码格式：background-repeat:no-repeat由于背景图片插入后默认设置平铺效果，所以需使用该... 查看详情

html表格的背景色怎么插入啊？

...就添加完成了。这样就解决了问题。参考技术Astyle="background:red"如：<tablestyle="background:red">针对表格<tdstyle="background:red">针对表格单元格<trstyle="background:red">针对表格一行 参考技术B用行... 查看详情