php - 使用 CSS 缩小 php 背景图片

Question

当显示大于 320px 时，图像大小合适。

但是，如果我使用较小的显示器，圆圈中的背景图像将不会调整大小，并且我会在较小的圆圈下丢失部分图像。

.ch-grid-variant li {
  width: 220px;
  display: inline-block;
  margin-bottom: 40px;
  position: relative;
  float: left;
  margin-left: auto;
  margin-right: 330px;
  display: table-cell;
}
.ch-item-variant {
  width: 118%;
  height: 118%;
  border-radius: 50%;
  border: solid #1B4046;
  position: relative;
  cursor: default;
  box-shadow: inset 0 0 0 0 rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.ch-img-x-variant {
  background-size: 260px 260px;
  border-radius: 50%;
  height: 260px;
}
.ch-img-x-variant img {
  border-radius: 50%;
  width: 260px;
  height: 260px;
  text-align: center;
}
.ch-info-variant {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-backface-visibility: hidden;
  /*for a smooth font */
}
.ch-item-variant:hover {
  box-shadow: inset 0 0 0 130px rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ch-item-variant:hover .ch-info-variant {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.ch-info-variant h3 {
  color: #fff;
  text-transform: uppercase;
  position: relative;
  letter-spacing: 2px;
  font-size: 32px;
  margin: 0 30px;
  padding: 65px 0 0 0;
  height: 80px;
  font-family: 'Open Sans', Arial, sans-serif;
  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ch-info-variant p {
  color: #fff;
  padding: 10px 5px;
  font-style: italic;
  margin: 0 30px;
  font-size: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
/* smaller than 320px */

@media only screen and (max-width: 320px) {
  .ch-item-variant {
    width: 100%;
    height: 100%;
    left: -1px;
  }
  .ch-img-x-variant {
    background-size: 220px 220px;
    height: 220px;
  }
  .ch-img-x-variant img {
    width: 220px;
    height: 220px;
  }
}

<ul class="ch-grid-variant">
  <li id="services_box_container1">
    <div class="ch-item-variant ch-img-x-variant" style="background: url(http://sandiegosids.org/wp-content/uploads/2014/02/Daly_Web_Banner-260px-CTA.jpg);">
      <div class="ch-info-wrap">
        <div class="ch-info-variant">
          <div class="ch-info-front ch-img-x-variant">
            <h3>text</h3>
            <p>undertext</p>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

我认为更改 CSS 中的“背景大小”可以解决问题，但事实并非如此......

我做错了什么？

非常感谢!

PS:示例中的背景 url 是硬链接(hard link)的，但实际上该字段填充了“php echo”变量。

Answer 1

内联样式中的背景属性设置了 background-size 属性，因此它会覆盖样式表中的任何 background-size:

background: [color] [image] [repeat] [position] [size];

如果您想使用媒体查询，最简单的解决方法是在您的代码中使用 !important:

background-size: 220px 220px !important;

或者您也可以将 contain 与它一起使用:

background-size: contain !important;

!important 会使事情变得困惑，因此请谨慎使用它，但如果您的图像需要动态设置，它可能是可行的方法。

另一种选择是在内联样式中包含 background-size，它具有相同的优先级。