html - 当我使用 background-image 时，为什么我的 CSS 不适用于图像？

Question

当我使用 background-image 时，为什么我的 CSS 不适用于图像？如果您查看示例 1，我正在使用 content，它使用所有 CSS 显示我自己的图像。但是，我需要使用 background-image 来确保浏览器:chrome、safari 和 firefox 可以查看我的图像。如果您运行示例 2 中的代码片段，则 CSS 不会应用于图像。

问题

是否可以让我的图像看起来像示例 1，但使用 background-image 并像示例 1 中那样应用所有 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>