通過CSS將圖像更改爲文本以進行打印？

Question

可以說我在我要打印的網頁上有一個標題橫幅。而不是浪費某人的墨水打印圖像的整個塊，有沒有辦法通過CSS來取代H1大小的文字圖像？

Answer 1

您可以將h1元素和圖像放在源中的同一位置，並將圖像CSS display:none用於打印介質，並將h1設置爲display:none用於屏幕介質。

Answer 2

布賴恩，典型的標誌物我反正使用圖像替換的圖形，所以徽標本身是真的在H1標籤。然後在我的印刷樣式表中。我做這樣的事情...

h1#logo a, h1#home-logo{ 
    text-indent: 0 !important; 
    background-image: none !important; 
    font-size: 1.2em !important; 
    display: block !important; 
    height: 1em !important; 
    width: 100% !important; 
    text-decoration: none !important; 
    color: black !important; 
} 

它刪除圖像替換並顯示文本。確保你使用media="print"分別調用這個樣式表。

Answer 3

我通常只是添加以下到我的樣式表：

.nodisplay 
{ 
    display: none; 
} 

@media print { 
    * { 
     background-color: white !important; 
     background-image: none !important; 
    } 
    .noprint 
    { 
     display: none; 
    } 
} 

然後分配NOPRINT類元素不應印刷：

<div class="noprint"> 

</div> 

併爲您的示例，像下面的東西應該工作：

<img src="logo.png" class="noprint" ...> 
<h1 class="nodisplay">Text Logo</h1> 

Answer 4

添加到Adam的解決方案：如果您的文本是固定的（「head banner was there」而不是「ad for this and such was there」），則可以使用:before or :after pseudo-elements插入文本，而不是將文本預先插入HTML中。

如果你用相同的文本替換許多圖像，我會讓你的HTML更輕。

我不得不說，我不喜歡這個CSS功能，但如果你想使用它，它就在那裏。