html - 使用 image-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

Pseudo Elements are just a box containing the generated content. So you can't resize the image inside.

This thread covers all the options pretty thoroughly
Can I change the height of an image in CSS :before/:after pseudo-elements?

The best option seems to be scale the image to what ever suits. But this is probably way to fiddly to implement everywhere.

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