如何设置css-content-image的大小？ [英] How can I set size of css-content-image?

问题描述

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

我有伪元素，看起来像这样。我想改变图像的大小缩放50％，以便它工作在高分辨率也是如此。如何做到这一点？

I have pseudo-element that looks like this. I would like to change the size of the image by scaling it down 50% so that it works on high-res-screens as well. How can I do this?

推荐答案

也可以将内容设置为空字符串并使用背景图片。只是另一种方法...

also, you could set the content to empty string and use a background image. Just alternatively...

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

这篇关于如何设置css-content-image的大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！