何时使用js image类给img标签签,何时使用background-image背景图像

一:解决div里面的img图像宽度不变,高度不变! & 超出div部分设置隐藏!
& & &图片:&
& & &div容器:
&1. background-image:样式实现
& & &img: 标签或者html组建实现
&2.一般来说,如果是装饰性的图片就使用background-img,如果和文体内容很相关就使用img
&3.加载过程:如果你用引入了一个很大的图片,那么在这个图片下载完成之前,img后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之 & & & 后,才开始加载背景图片,不会影响你浏览网页内容。&
&4.谨记:background图片的显示:div容器必须设置高度哦!
二:background-image属性补漏
& & 1.background-image:不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。
& & 2.background-Origin: 定义背景图像的位置区域。
& & 3.background-clip:背景图裁剪方式。 &
& & 4.background-size:length|percentage|cover| & & &可以设置负值的哦! & 试试不就知道了!
& & 问题:
  a:背景图超出容器,那么只会显示图片的左上部分哦! &&默认情况下,background-image放置在元素的左上角,并重复垂直和水平方向。
& & & b: &设置背景图:容器必须设置高度哦!&
  c: background-size:100% 完全填充满父元素哦! & &background-size:cover也是哦!&
& & & & & &&background-size:contain ? & 这显示?&
&三:再次完善哦!
  1.background-color:&rgba(4,4,4,0.7); & &设定背景色的透明度哦! &不会影响到容器里的文字哦!&
& & & & &红+绿+蓝+Alpha透明的颜色 & &我们以后要实现半透明效果(无论是背景,边框,文字颜色等都可以用半透明实现了)
    /wordpress/2010/05/rgba%e9%a2%9c%e8%89%b2%e4%b8%8e%e5%85%bc%e5%ae%b9%e6%80%a7%    e7%9a%84%e5%8d%8a%e9%80%8f%e6%98%8e%e8%83%8c%e6%99%af%e8%89%b2/
& & &2.background-position:设置背景图像的起始位置。 & &(解决背景图大于容器)
& & & &&background-size: length|percentage|cover|
& & & & 背景图无法撑开容器哦! & 所以超出部分会被overflow:hidden! & &
& & & & background-position就是就是为了当图片大于容器的时候,显示图片的指定部分哦!
&四:引申(你的突破点哦)
&问题1: &当图片的大小超出容器的大小时候,用img标签合适吗? & & 为了实现图片的缩放,还是用background好点吧! &
&问题2: &img做响应式好还是background-image做响应式好呢? & &&
&问题3: &css中图片何时会撑破div容器呢? & & & & &img会撑破容器的哦(当img的大小大于容器的大小)
&理解4: &为什么美工要把图片做的非常的大呢? &因为是为了在高分屏上获得更好的展示。 &在普通屏上图片设置为溢出隐藏(如果图片不关心显示部分); 但如果关心,则可以利用
& & & & & & &响应式实现哦 ! & 实现图片的缩放! &哦哦,理解美工的专业性!&
阅读(...) 评论()}

我要回帖

更多关于 img backgroundimage 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信