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：  為什么美工要把圖片做的非常的大呢？  因為是為了在高分屏上獲得更好的展示。  在普通屏上圖片設置為溢出隱藏（如果圖片不關心顯示部分）； 但如果關心，則可以利用

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