印刷用CSSで背景画像を印刷する方法＋

印刷用のCSSつくってたら、案の定background-imageで指定した背景画像が表示されない。
なんか、ブラウザの設定で印刷表示するようになるらしいが、、それもなぁーってことで

さっそくググりました。
「css 背景画像　印刷」って。

最初は意味が理解できなくて、他の方法ばかり試していましたが、この方法でうまくいきましたｗ

だた上記の方法だと、背景画像の中にテキスト文字を入れたり出来きないのです・・・。
本当はこんな感じにしたかったんです↓

今回は中にテキスト文字を入れたかったので、こんな方法を使いました。

#test {
  color: #fff;
  display: list-item;
  list-style-image: url(test.jpg);
  list-style-position: inside;
  position:relative;
}

#box1{
	position:absolute;
	top:80px;
	left:80px;
	font-size:120px;
}


<head>
<link rel="stylesheet" type="text/css" href="test.css" media="print">
</head>
<body>
<div id="test">
<div id="box1">test</div>
</div>
</body>

ポイントとしては、#testの部分で、positionをrelativeにして、#box1のところでposition:absoluteにしているってことですかね。
これで#testの上に#box1がレイヤーっぽい感じで乗っかるわけですね。
CSSとかそんなに詳しくないからかなり勉強になりました。

カテゴリ