img图片与background的差异

 

　　小伙伴们都知道在网页当中要插入一张图片可以使用img，但是有些小伙伴在接触background之后，容易把这两个图片插入方式搞混，那么我们一起来详细的看一下吧 img是一个html标签，我们想要在网页中实现图片的插入，直接在img的属性src中写入图片路径就可以啦——

 

　　<img src="img/pic.jpg" alt="">

 

　　通过background实现插入图片，background是一个CSS提供的背景属性，是用来做修饰的，那么我们就需要先写一个结构，然后通过背景来进行修饰

 

　　<div class="box"></div>

 

　　.box{

 

　　width: 300px;

 

　　height: 200px;

 

　　background:url(img/pic2.jpg) no-repeat;

 

　　}

 

　　OK，单从代码上看好像通过背景的方式插入图片比较复杂一点，复杂在哪呢？我们看一下背景图的插入，需要写一个容器，并且要给这个容器设定一个宽高才能显示内容，如果容器的高度为0，那么这张图片就插入不进去了。img图片不一样，它属于html标签，相当于内容跟文字一样只要放在页面中就可以展示出来。 除此之外，如果你想要实现文字内容在图片上的效果，可以使用背景图片，img图片上本身是不能放下文字的。

 

　　<!-- img图片写文字 -->

 

　　<img src="img/pic2.jpg" alt=""><br />

 

　　睡什么睡，起来嗨!!!

 

　　​

 

　　<!-- background背景图片写文字 -->

 

　　<div class="box">

 

　　睡什么睡，起来嗨!!!

 

　　</div>

 

　　/* background背景图片写文字 */

 

　　.box{

 

　　width: 300px;

 

　　height: 200px;

 

　　background:url(img/pic2.jpg) no-repeat;

 

　　font-size: 20px;

 

　　font-weight: 900;

 

　　color:crimson;

 

　　}

 

　　​

 

　　好了，看完了这些是不是明白一点img图片与background图片的区别了呢？我们一起再来总结一下吧 1、img图片直接插入使用，background图片需要写一个容器并设置宽高才能插入使用 2、img图片跟文字一样属于内容，本身是不会让文字显示在图上，background图片属于背景，文字是可以图上的