在css中如何插入图片(详解img与background插入图片的差异)

 分类:div+css教程时间:2022-09-22点击:

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

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

在css中如何插入图片?通过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图片属于背景,文字是可以图上的

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: