设置具有图像 URL 内容的伪元素的宽度 [重复]

Question

我有一个应该可以打印的页面。问题是该页面包含一些带有background-image 的元素（并且我在打印时看不到图像），所以我尝试为打印机创建一个样式表，其中包含一些可以帮助我显示图像的伪元素，它看起来像：

.pbar-fill {
  background: none !important;
}
.pbar-fill::before {
  content: url("/images/bg-progress-bar-big01.gif") !important;
  position: absolute !important;
  z-index: 1003 !important;
  width: 23px !important;
}

它并不顺利，因为图像总是得到它的全宽（220px）。

Answer 1

伪元素只是一个包含生成内容的框。所以你不能调整里面的图像大小。

这个帖子非常彻底地涵盖了所有选项
Can I change the height of an image in CSS :before/:after pseudo-elements?

最好的选择似乎是将图像缩放到适合的大小。但这可能是到处实施的繁琐方式。

.pbar-fill::before {
    content: url('image.jpg');
    transform: scale(.5);
}