使用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只是一个包含生成内容的框。所以你无法调整里面的图像。

这个主题非常全面地涵盖了所有选项 Can I change the height of an image in CSS :before/:after pseudo-elements?

最好的选择似乎是将图像缩放到适合的范围。但这可能是在各地实施的方式。

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