img标签与background属性插入图片的差异是什么-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

img标签与background属性插入图片的差异是什么

本篇内容介绍了“img标签与background属性插入图片的差异是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

成都创新互联是专业的东西湖网站建设公司,东西湖接单;提供网站制作、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行东西湖网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

img图片与background的差异

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

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

.box{

width: 300px;

height: 200px;

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

}

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


睡什么睡,起来嗨!!!

睡什么睡,起来嗨!!!

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

.box{

width: 300px;

height: 200px;

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

font-size: 20px;

font-weight: 900;

color:crimson;

}

“img标签与background属性插入图片的差异是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


分享题目:img标签与background属性插入图片的差异是什么
本文链接:http://kswsj.cn/article/gishoj.html

其他资讯