當我使用background-image爲什麼我的CSS不適用於圖像？

Question

當我使用background-image爲什麼我的CSS不適用於圖像？如果你看例1，我使用content，它顯示了我自己的所有CSS的圖像。但是，我需要使用background-image來確保瀏覽器：Chrome瀏覽器，Safari瀏覽器和Firefox可以查看我的圖像。如果您在示例2中運行片段，則CSS不會應用於圖像。

問題

是有可能，你可以得到我的形象看起來像例1，但使用background-image所有的CSS應用類似實例1中？

實施例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

對於這個形象，你可以同時使用 背景圖像：「蓋」或「包含」 它將限制容器內的圖像。

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