如何在FF或IE中打印背景圖像？

Question

有沒有什麼方法可以設置ff，即打印背景圖像？

我使用星形圖像來分類一些技能，我將它設置爲背景圖像並將其設置爲設置一個開始，兩個，三個等等。當我嘗試打印頁面時圖像消失。

所以有什麼辦法可以讓它們出現在我打印頁面的時候，或者至少有一種方法是用*或者可見的東西代替圖像。

Answer 1

您是否考慮過使用打印樣式表？這可以讓你做一些事情，如：

<div class="star">*</div> 

/* media:screen */ 
.star { 
    background: ...; 
    overflow: hidden; 
    text-indent: 9999em; 
} 

/* media:print */ 
.star { 
    text-indent: 0; 
} 

或更容易：

<div class="star"><img src="./images/star.jpg" alt="*" /></div> 

/* media:screen */ 
.star img { 
    visibility: hidden; 
} 

/* media:print */ 
.star img { 
    visibility: visible; 
} 

您可以通過CSS或鏈接元素指定樣式表的瀏覽器應通過提供媒體標籤使用，：

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

Answer 2

對於IE http://support.microsoft.com/kb/980077

必須有FF類似的東西。

p.s.你不能爲客戶設置這個！

p.s.2。你可以用css（media =「print」）替換這些星星與前景圖片（如果需要絕對）。

Answer 3

在Firefox中，轉到File => Page Setup。有一個複選框「打印背景（顏色&圖像）」。只要檢查一下，你應該全部設置。

Answer 4

我相信這是一個瀏覽器設置，而不是網站的後端。然而，我可能是錯的。

Answer 5

在您的print.css文件中將背景圖像更改爲列表項。

所以：

.background { 
    display: list-item; 
    list-style-image: url(yourbackgroundimage.gif); 
    list-style-position: inside; 
} 

描述這種方法更多在這裏：http://www.web-graphics.com/mtarchive/001703.php

Answer 6

其實我找到了答案，是很簡單的。

情況：我有一個背景圖片的div標籤。打印時不打印。

解決方案：

1. 創建另一個名爲「打印樣式表。CSS」

2. 下面的代碼行添加到您的所有網頁的原單CSS樣式錶鏈接後右：

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

3. 緊接着你的原非打印頭，添加以下內容：

   <div id="header"></div> <!-- YOUR NON PRINTING HEADER --> 
   
   <div id="printheader"><img src="images/header_image.jpg" width="940" height="100" alt="header" /></div> 
   

4. 在你的style.css文件，它是爲你的網站主css樣式，添加以下行：

   #printheader {display: none; } /* Makes the print header not visible */ 
   

5. 在你的print.css文件，添加以下代碼：

   #footer, #nav, #sidenav, .print, .search, .breadcrumb, .noprint {display: none;} /* Items from your page you DO NOT want to print */ 
   
   #container, #container2, #contentwide, #contentwide_tpsub, #contentwide_tp, #contentwide_open {width: 100%; margin: 0; float: none;} /* Clear widths to ensure all text is printed */ 
   
   #printheader {display: block; } /* Turns ON the div when printing */ 
   

你在做什麼正常的「屏幕」頁上基本上關斷頭和轉動printheader ON時你打印電話。

**請注意：您需要修改print.css文件以包含style.css文件的其他元素以格式化字體，顏色等。使用「打印預覽」播放並添加元素你需要等到你得到你一直在尋找的打印輸出。

Answer 7

我有與IE不支持背景打印相同的問題。

因此，我創建了2個div，其中一個div具有更高的Z並且具有文本內容。第二個div緊接在前面的div後面，但Z值較低，並且對於100％的寬度和高度具有圖像（img不是背景圖像）。所以當我將兩個div展示在一起時，它看起來像一個div，因爲它們完全重疊。當我在IE瀏覽器中打印時，它顯示圖像，因爲圖像不是背景圖像，而是一個正常的img標籤，填滿了較低的div。

一些代碼。

<div id="survey" class="surveyResponseWindow" style="display:none;">Please logout and re-login, because your session has expired.</div> 
<div id="surveyBackground" class="surveyBackgroundDiv" style="display:none;"> 
<!-- provides the background image for ie browser so that it does not show the lower level divs. --> 
<img src="/rsm/jsp/public/images/contentGrad.gif" width="100%" height="100%" /> 
</div> 

<script language="javascript" type="text/javascript"> 
function showSurvey(surveyResponseId) { 
    var e = document.getElementById("survey"); 
    var bkgd = document.getElementById("surveyBackground"); 
    var focusinput = document.getElementById('focusinput'); 
    var nh = 'data-nohide'; 

    if (e.style.display=='none') { 
     e.style.display='block';//show div 
     bkgd.style.display='block';//show div 
    } 
    focusinput.focus();//set focus so we know when they click outside 

    e.onclick = function(e) { 
     this.style.display='none';//hide div if they click on it 
     bkgd.style.display='none';//show div 
    }; 
    //if the user press ESC 
    focusinput.onkeyup = function(e){ 
     if(e.keyCode === 27){ 
      var survey = document.getElementById("survey"); 
      var bkgd = document.getElementById("surveyBackground"); 
      //hide the div 
      survey.style.display = 'none'; 
      bkgd.style.display = 'none'; 
      this.removeAttribute(nh); 
     }else{ 
      //do something else with other keys(ie:down, up, enter)... 
      focusinput.focus(); 
     } 
    }; 
    //click somewhere else input onblur 
    // was taken out because the browser print function would close the survey div page. 
    //focusinput.onblur = function(){ 
    // if(!e.getAttribute(nh)){ 
    //  //hide the div 
    //  e.style.display = 'none'; 
    // } 
    //};  

    var params='<%=request.getContextPath()%>/request/dashboard/drilldown/callSurveyDetailAjax.html?surveyResponseId='+surveyResponseId; 
    YAHOO.plugin.Dispatcher.fetch(e,params, {onLoad:showBackground}); 
} 

var showBackground = function() { 
    var e = document.getElementById("survey"); 
    var bkgd = document.getElementById("surveyBackground"); 
    bkgd.style.width = e.innerWidth(); 
    bkgd.style.height = e.innerHeight(); 
    bkgd.style.left = e.offsetWidth(); 
    bkgd.style.top = e.offsetHeight(); 
} 

window.onload = function() { 
    var focusinput = document.getElementById('focusinput'); 
    focusinput.focus();//set focus so we know when they click outside 
} 
</script> 

在CSS把這個

.surveyResponseWindow 
{ 
width:500px; 
height:600px; 
z-index: 2; 
position: absolute; 
top:100px; 
left:150px; 
border:1px solid #AAAAAA; 
border-bottom-left-radius:10px; 
border-bottom-right-radius:10px; 
border-top-left-radius:10px; 
border-top-right-radius:10px; 
box-shadow: -1px 7px 15px -2px #000; 
} 

.surveyBackgroundDiv 
{ 
z-index: 1; 
position: absolute; 
top:100px; 
left:150px; 
width:500px; 
height:600px; 
border:1px solid #AAAAAA; 
border-bottom-left-radius:10px; 
border-bottom-right-radius:10px; 
border-top-left-radius:10px; 
border-top-right-radius:10px; 
box-shadow: -1px 7px 15px -2px #000; 
} 

Answer 8

不要使用background-image顯示可打印圖像，使用正常<img>標籤來代替。

background-image是爲不重要圖像大多數現代瀏覽器趨向（在IE 11，鉻35，FF 30默認設置）打印期間跳過。

爲什麼你會不是想使用img標籤？

• 對齊問題 - 使用絕對定位解決對準問題。

• 拼合 - 是拼合使用possible簡單img和div標籤。

• 變得更加困難，爲用戶節省圖像 - 也就是說also possible簡單img和div標籤。

• 要「保持我的HTML清潔」 - 做任何解決方案的解決方案真的讓它更清潔嗎？放棄它:)