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：  爲何美工要把圖片作的很是的大呢？  由於是爲了在高分屏上得到更好的展現。  在普通屏上圖片設置爲溢出隱藏（若是圖片不關心顯示部分）； 但若是關心，則能夠利用

             響應式實現哦 ！   實現圖片的縮放！  哦哦，理解美工的專業性！