可打印的样式表与DIV

我有一个网站，我正在尝试制作可打印的版本，而且我正在使用新的打印样式表，但我遇到了问题。我有一个星级评分的DIV，它只是HTML文件中的一个空DIV，但在常规的CSS中，我拥有实际星星的背景图片。可打印的样式表与DIV

的DIV在HTML文件看起来像这样：

<div class="example_rating"></div>

在常规样式表的代码看起来是这样的：

.example_rating { 

    height:40px; 

    width:200px; 

    margin-left:20%; 

    background: url('../stars.png') no-repeat scroll 0 0 transparent; 

    }

我的问题是，星级评定没有显示出来完全采用网页的可打印格式。我没有DIV隐藏或任何东西，但我不知道我能做些什么来让它以可打印格式显示。

我意识到这个问题可能有点含糊，但我不知道该怎么解释。如果需要，我绝对可以提供更多细节。谢谢！

来源

2012-04-15 emagdnim

背景图片是显示评分并且不打印的背景图片吗？ – GrantVS 2012-04-15 22:56:40

您无法强制显示背景。也许你想用代替它。或者是一些“*****”的东西。 – ezakto 2012-04-15 22:57:40

是的，它只是没有出现在网页的友好版本上。我不知道为什么。 – emagdnim 2012-04-15 22:59:11

在你的CSS，恒星呈现作为背景图像，并且在打印时，通常不会默认显示背景。

您必须将星号显示为<img>，或告诉用户启用背景打印。

编辑：

以避开这将是打印的星级评价作为文本以及背景图像，然后让DIV透明（和黄在里面的字体的最简单方法打印样式表）。例如：

<div class="example_rating"> 
    4/5 stars. 
</div>

样式表：

.example_rating { 
    color:Transparent; 
    /* Alternatively: text-indent: -9999px; */ 
    height:40px; 
    width:200px; 
    margin-left:20%; 
    background: url('../stars.png') no-repeat scroll 0 0 transparent; 
}

编辑2：

你可以尝试把这个在您的打印样式表：

.example_rating { 
    background: none; 
} 
.example_rating:after { 
    content: '4/5 stars' 
}

这让里面的一些文字div使用CSS，如果你只把它放在你的打印样式表中，它只会在您打印时出现！

来源

2012-04-15 22:58:08

感谢您的回答！不幸的是，这是一个任务，我不允许编辑HTML文件。我不得不想出一种方法来使它只用CSS，但我不确定这是可能的：/ – emagdnim 2012-04-15 23:06:40

@stephen - 请参阅我的第二个编辑。它应该做你想要的（以一种黑客的方式），但它不适用于旧版本的Internet Explorer。 – 2012-04-15 23:15:52

它的工作！非常感谢！ :) – emagdnim 2012-04-15 23:50:14

-1

试图创建新的打印样式表只...是这样的：

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

或者在你目前的样式表，把你的打印样式

@media print { 
}

来源

2012-04-15 22:57:49 Connor

可打印的样式表与DIV

回答

相关问题