gpt4 book ai didi

javascript - Div 背景图像打印空白

转载 作者:行者123 更新时间:2023-12-03 07:17:41 24 4
gpt4 key购买 nike

我有以下 html 页面。

<html>
<head>
</head>
<body style="margin: 10px">
<div style='width: 100%; height: 100%;
background-image: url("https://i.ytimg.com/vi/rfbMN3-IFiA/maxresdefault.jpg");
background-repeat: no-repeat; background-size:contain; background-position:center'>
</div>
</body>
</html>

我的问题是,当我打印页面时,它显示空白。这是否意味着div背景无法打印。如果是这样,我该如何改造我的 html 页面以使其行为方式相同并且仍然可打印?我的最终目标是以适合页面的方式打印图像。

附注我试图将我的代码放在 fiddle 中但没有显示。

附注我的墨盒已满:)

最佳答案

编辑:

您需要另一个 CSS 样式表,并将媒体选项设置为打印:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

这本质上是其他样式表的副本,但在上面的代码中,它称为 print.css

默认媒体是屏幕,所以我们通常不需要设置它。

应该可以,但它不会在 fiddle 中工作,如果我能得到一个工作向你展示,我会更新。如果有效请告诉我!

Fiddle

以下 CSS 适用于所有浏览器:

html { 
background: url("https://i.ytimg.com/vi/rfbMN3-IFiA/maxresdefault.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

关于javascript - Div 背景图像打印空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36346439/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com