background-image 和 img

一：解决div里面的img图像宽度不变，高度不变！   超出div部分设置隐藏！

     图片：1920x526 

     div容器： 1423x526   

 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|contain;      能够设置负值的哦！   试试不就知道了！

    问题：

　　a：背景图超出容器，那么只会显示图片的左上部分哦！   默认状况下，background-image放置在元素的左上角，并重复垂直和水平方向。

      b:  设置背景图：容器必须设置高度哦！ 

　　c： background-size:100% 彻底填充满父元素哦！    background-size:cover也是哦！ 

            background-size:contain ?   这显示？ 

    

 三：再次完善哦！

　　1.background-color: rgba(4,4,4,0.7);    设定背景色的透明度哦！  不会影响到容器里的文字哦！ 

         红+绿+蓝+Alpha透明的颜色    咱们之后要实现半透明效果（不管是背景，边框，文字颜色等均可以用半透明实现了）

　　　　http://www.zhangxinxu.com/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|contain;

        背景图没法撑开容器哦！   因此超出部分会被overflow：hidden！    

        background-position就是就是为了当图片大于容器的时候，显示图片的指定部分哦！

 

 

 

 

 

 

 

 

 四：引伸（你的突破点哦）

 问题1：  当图片的大小超出容器的大小时候，用img标签合适吗？     为了实现图片的缩放，仍是用background好点吧！  

 问题2：  img作响应式好仍是background-image作响应式好呢？     

 问题3：  css中图片什么时候会撑破div容器呢？          img会撑破容器的哦（当img的大小大于容器的大小）

 理解4：  为何美工要把图片作的很是的大呢？  由于是为了在高分屏上得到更好的展现。  在普通屏上图片设置为溢出隐藏（若是图片不关心显示部分）； 但若是关心，则能够利用

             响应式实现哦 ！   实现图片的缩放！  哦哦，理解美工的专业性！