2

印刷できるはずのページがあります。問題は、ページにいくつかの要素が含まれていることです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) になるため、うまくいきません。

4

1 に答える 1

0

疑似要素は、生成されたコンテンツを含む単なるボックスです。そのため、内部の画像のサイズを変更することはできません。

このスレッドはすべてのオプションをかなり徹底的にカバーしています
CSS :before/:after 疑似要素で画像の高さを変更できますか?

最適なオプションは、イメージをこれまでにないサイズにスケーリングすることです。しかし、これはおそらくどこにでも実装するのが面倒な方法です。

.pbar-fill::before {
    content: url('image.jpg');
    transform: scale(.5);
}
于 2013-06-14T01:52:17.267 に答える