當我使用背景圖像時，為什么CSS不適用於該圖像？

Question

當我使用background-image為什么CSS不適用於該圖像？ 如果看示例1，我使用的content將顯示所有CSS的圖像。 但是，我需要使用background-image來確保瀏覽器：chrome，safari和firefox可以查看我的圖像。 如果在示例2中運行代碼段，則CSS不會應用於圖像。

題

是否有可能使我的圖像看起來像示例1，但是像示例1一樣使用background-image並應用了所有CSS？

例1

  .shape { border-radius: 25px; background: #4D5061; content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg); color: white; height: 300px; margin: auto; padding: 3px; width: 300px; top: 15%; left: 50%; position: absolute; margin-left: -150px; z-index: 10; } 

 <div class="shape"></div> 

例子2

  .shape { border-radius: 25px; background: #4D5061; background-image: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg); color: white; height: 300px; margin: auto; padding: 3px; width: 300px; top: 15%; left: 50%; position: absolute; margin-left: -150px; z-index: 10; } 

 <div class="shape"></div> 

Answer 1

您可以使用background-size:contain; 縮放背景圖像以覆蓋其容器：

  .shape { border-radius: 25px; background: #4D5061; background-image: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg); background-size: contain; color: white; height: 300px; margin: auto; padding: 3px; width: 300px; top: 15%; left: 50%; position: absolute; margin-left: -150px; z-index: 10; } 

 <div class="shape"></div> 

Answer 2

對於此圖像，您可以使用background-image：'cover'或'contain'這將限制圖像在容器內。

這是他們的區別。 http://cdn.onextrapixel.com/wp-content/uploads/2012/02/cover-contain.jpg