可打印的樣式表與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

回答

相關問題