我目前正在使用Bootstrap 3.3.7以及大量的自定義CSS，並且在生成可打印內容時遇到問題。可打印引導內容

一個小例子

.bg-stretch { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t bottom: 0; 
 
\t right: 0; 
 
\t left: 0; 
 
\t background-size: cover; 
 
\t background-image: url("https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg"); 
 
}

<link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="bg-stretch"></div>

此生成圖像的背景下，看起來不錯，但如果我嘗試打印它在谷歌瀏覽器使用按Ctrl + P，即使我檢查了，我得到的只是沒有圖像的空白頁面。

如果我禁用bootstrap（刪除<link>），那麼一切正常。

我試圖與張貼在this question的答案，解決這個問題，但添加CSS來

@media print { 
    /* Your styles here */ 
}

並沒有解決我的問題。

我該如何解決這個問題？

來源

2016-09-05 Daniel

這些是來自bootstrap.css文件的樣式。

@media print { 
    *, 
    *:before, 
    *:after { 
    color: #000 !important; 
    text-shadow: none !important; 
    background: transparent !important; 
    -webkit-box-shadow: none !important; 
      box-shadow: none !important; 
    } 
}

嘗試從此刪除background: transparent !important。

另外，您可以添加!important規則，以你的背景在CSS：

.bg-stretch { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    background-size: cover; 
    background-image: url("https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg") !important; 
}

來源

2016-09-05 11:37:47 makshh

在我的版本，它說'背景：0 0重要;'，但刪除它解決了我的問題。 – Daniel

使用此CSS代碼：

@media print{*{text-shadow:none !important;color:#000 !important;background:transparent !important;box-shadow:none !important;}

來源

2016-09-05 11:43:11

可打印引導內容

一個小例子

回答

相關問題