代码之家 › 专栏 › 技术社区 › Daniel user3757731

可打印引导内容

google-chrome twitter-bootstrap css html

Daniel user3757731 · 技术社区 · 8 年前

我目前正在使用进行一个项目 引导3.3.7 以及许多自定义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");
}

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

这会生成一个看起来不错的图像背景,但如果我尝试在Google Chrome中使用 Ctrl键 + P 即使我有选中后,我得到的只是一张没有图像的空白页。

如果禁用引导(删除 <link> )然后一切都会完美地进行。

我已经尝试用张贴在 this question ,但将CSS添加到

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

并没有解决我的问题。

我怎样才能解决这个问题?

2 回复 | 直到 7 年前

max 8 年前

这些样式来自 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;
}

Morteza QorbanAlizade 8 年前

使用此 CSS 代码:

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

推荐文章

darwhite · Dom未在web浏览器for web中显示所有内容。WhatsAppcom[关闭]

2 年前

gagan · 我想使用django服务器将我的android studio应用程序与paypal restapi集成

2 年前

Greta · 硒无法获取元素。使用python和web驱动程序时显示文本

2 年前

user2439278 · ChromeDriver未能在Docker无头机器人框架内启动

2 年前

Scobee · Getting[Severy]:尝试捕获页面时,从呈现程序接收消息时超时:10.000

2 年前

Alfred Huang · 如何在Chrome浏览器按键事件中捕获'Ctrl+1'热键?

2 年前

Samy Mostakim · chrome正常工作,但firefox给我这个erorr

2 年前

mk_ · Selenium-阅读在新选项卡中打开的pdf文件,但不包含url

6 年前

milan · 如果文本与所提供的对象匹配,请将其超链接

6 年前

user332951 · Google chrome api javascript检测浏览器中打开的文件

6 年前