Web前端技术分享:img标签与background插入图片的区别
生活随笔
收集整理的這篇文章主要介紹了
Web前端技术分享:img标签与background插入图片的区别
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在前端開發的時候經常會需要插入圖片作為背景的情況,常用的方式一般是插入標簽,或者使用background屬性。那么你知道這兩種屬性有什么區別嗎?下面,小千帶你了解一下。
img方式
background屬性方式
單從代碼上看好像通過背景的方式插入圖片比較復雜一點,復雜在哪呢?我們看一下背景圖的插入,需要寫一個容器,并且要給這個容器設定一個寬高才能顯示內容,如果容器的高度為0,那么這張圖片就插入不進去了。img圖片不一樣,它屬于html標簽,相當于內容跟文字一樣只要放在頁面中就可以展示出來。 除此之外,如果你想要實現文字內容在圖片上的效果,可以使用背景圖片,img圖片上本身是不能放下文字的。
好了,看完了這些是不是明白一點img圖片與background圖片的區別了呢?我們一起再來總結一下吧
1、img圖片直接插入使用,background圖片需要寫一個容器并設置寬高才能插入使用
2、img圖片跟文字一樣屬于內容,本身是不會讓文字顯示在圖上,background圖片屬于背景,文字是可以圖上的。
希望以上分享能幫到大家。
本文來自千鋒教育,轉載請注明出處。
總結
以上是生活随笔為你收集整理的Web前端技术分享:img标签与background插入图片的区别的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: SpringBoot下的模板技术Thym
- 下一篇: 2017年html5行业报告,云适配发布