CSS:background-image 和 <img />

  • Post author:
  • Post category:其他


1. background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。

默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。

2.<img src=”图片路径” width=”175″ height=”47″ alt=”” />

<img> 标签有两个必需的属性: src 和 alt。

可选属性


align
  • top
  • bottom
  • middle
  • left
  • right
不推荐使用。规定如何根据周围的文本来排列图像。

border

pixels
不推荐使用。定义图像周围的边框。

height

  • pixels

  • %
定义图像的高度。

hspace

pixels
不推荐使用。定义图像左侧和右侧的空白。

ismap

URL
将图像定义为服务器端图像映射。

longdesc

URL
指向包含长的图像描述文档的 URL。

usemap

URL
将图像定义为客户器端图像映射。

vspace

pixels
不推荐使用。定义图像顶部和底部的空白。

width

  • pixels

  • %
设置图像的宽度。



img




是内容部分的东西,css的background-image是修饰性的东西。





img















从页面元素来说,如果是页面中的图片是作为内容出现的




background-image






背景图片,修饰性的内容,在页面中可有可无。有,是为了让页面中视觉感受上更美


在网页中的加载顺序不一样,html中的标签<img/>是网页结构(内容)的一部分会在加载结构的过程中加载,  以css背景图存在的图片background-image会等到dom结构加载完成(网页的内容标签全部显示以后)才开始加载,  既网页会先加载标签<img/>的内容,再加载背景图片background-image。如果你用引入了一个很大的图片,那么在  这个图片下载完成之前,img后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之后  ,才开始加载背景图片,不会影响你浏览网页内容。



版权声明:本文为mqmak原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。