Question

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

问题

是否有可能让我的图片看起来像示例1，但使用background-image并应用所有CSS，如示例1所示？

示例1

＆＃13;

    .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;
          }

＆＃13;

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

＆＃13;

示例2

＆＃13;

    .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;
          }

＆＃13;

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

＆＃13;

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：＆＃39; cover＆＃39;或者＆＃39;包含＆＃39; 它将限制容器内的图像。

这是他们的不同之处。 http://cdn.onextrapixel.com/wp-content/uploads/2012/02/cover-contain.jpg

当我使用背景图像时，为什么我的CSS不适用于图像？

2 个答案: