如何设置 css-content-image 的大小？ [复制]答案

【问题标题】：How can I set size of css-content-image? [duplicate]如何设置 css-content-image 的大小？ [复制]
【发布时间】：2015-02-01 07:00:43
【问题描述】：

.upper-menu .search-form::after {
  content: url('../images/search.png');
  position: absolute;
  height: 10px;
  top: 5px;
  right: 22px;
}

我有一个看起来像这样的伪元素。我想通过将图像缩小 50% 来更改图像的大小，以便它也可以在高分辨率屏幕上使用。我该怎么做？

【问题讨论】：

试试background-size: 10px 5px;

标签： css pseudo-element

【解决方案1】：

另外，您可以将内容设置为空字符串并使用背景图像。或者……

.upper-menu .search-form::after {
  content: ' ';
  display: inline-block;
  position: absolute;
  background: #bada55 url("img_2x.png") no-repeat;
  background-size: contain;
  height: 10px;
  width: 10px;
  top: 5px;
  right: 22px;
}

【讨论】：

【解决方案2】：

您只需将宽度和高度属性设置为 50%。这将根据浏览器窗口对其进行缩放。

祝你好运！

【讨论】：

实际上它会相对于.search-form缩放，而不是浏览器窗口。
实际上，它会缩放到指定的尺寸——即10px。