Bootstrap打印CSS去除背景颜色

2024-01-27

当我使用引导程序时,当我尝试打印页面时,它会从所有内容中删除背景颜色。 我网站上的几乎所有内容都使用引导类,因此我想避免在引导程序之外使用大量手动 CSS。 我发现 bootstrap 使用@media print删除背景颜色。我也使用引导主题(统一主题),它也删除了背景颜色。

主题-united.css

@media print
*, *:before, *:after {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(0, 0, 0) !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;

bootstrap.min.css

@media print
*, :after, :before {
    color: rgb(0, 0, 0)!important;
    text-shadow: none!important;
    background: 0 0!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;

有没有办法确保在不编辑这2个CSS文件的情况下打印时背景颜色不会被删除?

例如: 当我使用 .alert-danger 时,我希望将警报危险打印为屏幕上显示的样子,因此将打印为红色框。

参见 JSFiddle:http://jsfiddle.net/7mtk7wrh/ http://jsfiddle.net/7mtk7wrh/


不幸的是,您的问题没有一个好的答案 - 但也许如果您了解原因,那么您可以选择前进的方向。

Why?

Bootstrap 确实使用了@media print { * { color: $fff; background: transparent; }}——但是有一个非常充分的理由。这段代码实际上是源自标准化.css https://github.com/necolas/normalize.css项目(由当时的 @mdo 学院、@necolas 发起) - 其目的是使所有浏览器的行为相同。这些人选择“规范化”CSS 有一个很好的理由:

对于大多数浏览器,人们可以选择包含或排除背景颜色,因此即使在同一浏览器中,这种行为也不是标准的。想象一下一个具有非常暗的背景和白色文本的网站 - 当在关闭背景的情况下打印时,它看起来就像你没有打印任何东西 - 而实际上你是在没有(白色)背景上打印白色文本。

无法解释颜色的所有不同用途,因此他们选择黑色(字体)和白色(背景,实际上是“透明”)。甚至黑色的选择也经过深思熟虑——它是更好的打印解决方案,因为大多数彩色打印机有更多的黑色“墨水/碳粉”(更经济),并且它们不需要混合颜色来变成黑色(所以更快)。

请记住,Bootstrap 也是一个“框架” - 如果您愿意的话,可以作为一个起点 - 并且感谢 @mdo 和 @necolas,他们有先见之明,在建立可预测的基线方面考虑了这一点。(不,我不认识他们。)

Nope...

所以这里的想法是:“如果我们可以‘返回’并取消设置它会怎么样。不幸的是,CSS 不是这样工作的 - 是的,浏览器将 CSS 声明加载到“队列”中,其中最后一个声明获胜(LIFO,或后进) -first-out),但我不知道如何删除这个堆栈。所以 CSS 开发人员只需在末尾添加更多内容......

因此,人们会假设我们可以按照这种方式返回——添加一个* { background-color: inherit }。问题是inherit恢复到父属性,但是*是根,所以它没有什么可恢复的。同样适用于initial!

Maybe!

所以我们只剩下 4 个选择,没有一个是你所希望的,但它就是这样。按难度顺序:

  1. 下载 BS(less 或 sass)源代码,编辑有问题的代码,然后编译它。 (您需要使用本地副本,CDN 不起作用。)
  2. 下载您选择的 CSS 变体,搜索并删除有问题的代码。 (又没有 CDN。)
  3. Use getbootstrap.com/customize http://getbootstrap.com/customize/要创建新变体 - 排除“通用 CSS”下的“打印媒体样式”。 (再次强调,没有 CDN)
  4. 覆盖您要打印的颜色的特定项目:例如
    @media print {
      .alert-danger {
        color: yellow !important;
        background-color: red !important;
      }
    }

CDN 的 BS 副本现在可以工作,但是您会遇到用户可能不打印背景并在白色上输出白色(例如黄色)的问题!

Finally

好吧,我希望了解原因至少是您思考解决方法的一种方式。我遵循的一般经验法则是,打印时,背景(应该)始终是白色的。当受到这种限制时,您开始思考新颖的想法,例如文本周围仅“打印”的感叹号图标(@media only screen { .hidden-screen { display: none; }})

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Bootstrap打印CSS去除背景颜色 的相关文章

  • css如何让文本底部对齐?

    怎么做怎么做 a 文字底部对齐吗 我已经添加了height line height and vertical align bottom 但文本仍然在 div 的中间 怎么做 谢谢 Test in http jsfiddle net BanA
  • Bootstrap 列中的标题高度相同

    我有这样的 html bootstrap css div class container div class row div class col xs 6 col div class block div class title strong
  • Angular 和 Node JS 中的路由问题 [Angular]

    我有角度js的问题 我创建了 login html 和 home html 成功登录后我想将页面更改为 home html 我的路由不起作用 默认 url 是 localhost angular 我尝试路由 realpath 即 local
  • 无法在scrollView中滚动

    我有一个屏幕 我可以在输入字段中输入内容并获得相应的搜索结果 该列表在 ScrollView 中呈现 但当键盘打开时 在 Android 中 它仍然不允许我滚动 我怎样才能解决这个问题 return lt gt addressesFound
  • CSS 计数器输出不匹配

    有人可以解释一下为什么吗section计数器值总共打印 0h2 tags 这是源代码
  • 等宽字体中的字体大小和字符宽度之间有什么依赖关系?

    等宽字体中的字体大小和字符宽度之间有什么依赖关系 在我的网络应用程序中 我使用 courier new 字体 我想知道 字符串的实际长度 以像素为单位 是多少 如果我知道CSS font size属性 它如何帮助我知道字符串的实际长度 谢谢
  • PHP:如何防止不必要的换行

    我正在使用 PHP 创建一些基本的 HTML 标签始终相同 但实际链接 标题对应于 PHP 变量 string p a href strong i title i i strong a br echo string fwrite outfi
  • 列表中允许 div 吗? [复制]

    这个问题在这里已经有答案了 我知道DIV inside LI是不允许的 但我最近在许多 大 网站上看到了它 例如粉碎杂志 网页设计师墙 etc 我尝试验证网站 但它们有错误 但没有任何信息DIV in LI 那么我可以在里面使用它吗LI 我
  • 带有旋转文本的垂直导航

    我正在尝试实现一个包含链接的垂直导航菜单 并且我已使用 css3 将链接文本旋转到 270 度 我旋转了它 因为我希望文本从下到上 问题是当我添加顶部填充时 间距不一致 你可以看到我的代码here http jsbin com ravudu
  • 调整离子卡中的图像大小

    我想显示一组图像 并在下面说明 我选择使用 Ionic 卡 我得到这个结果 第一张图片 虽然我想保留现在的相同布局 并添加描述 这是我的代码
  • 图像仅在 iPhone x 上拉伸

    我目前正在设计和构建一个 html 和 css 网站 遇到了一个小问题 我使用 chrome 开发工具检查了响应能力 根据手机和平板电脑的大小调整窗口大小 一切看起来都很好 然而 现在我在 iPhone X 上检查了该网站 图像全部垂直拉伸
  • 电子邮件模板 - MS Office Outlook 365 中不显示表格背景图像

    为了电子邮件模板的目的 我需要在 table 它包含图像上的文本 现在我已经尝试过 https stackoverflow com a 15620571 6191987 https stackoverflow com a 15620571
  • 如何读取 XML 文件并从中获取值以在 PHP 编码的 HTML 页面中显示

    我有一个 XML 文件 其中有一些重复的标签 其中包含不同的值 我需要获取这些值并显示在我的网页中 请帮助我得到这个 如果您使用 PHP5 可以查看 SimpleXML 您可以在这里找到介绍教程 http www w3schools com
  • 输入类型=“时间”超过24小时

    我刚刚遇到以下问题 在网络应用程序用户界面中 我希望用户输入响应消息的时间范围 以小时为单位 时间范围应最长为 72 小时 我们很乐意使用
  • Angular - Safari 无法正确显示 DOM

    我是 Angular 的新手 使用 Angular 4 我尝试通过在关联的组件类文件中设置属性来更新特定元素 但是 除非我尝试强制重新绘制网页 通过调整窗口大小等 否则页面不会更新 我打开检查器 看到 DOM 已更改 但显示与元素检查器中的
  • css:将div制作成圆角并在其3/4处添加边框

    我有这样的代码 div class circle div and css circle border left 1px solid red border bottom 1px solid red border radius 200px wi
  • 无法做到最大宽度

    我有一个页面 内容如下 div testingtestingtestingtestingtestingtestingtestingtestingtesting testingtestingtestingtestingtestingtesti
  • Docpad 上的 Bootstrap 下拉菜单和可选项卡

    我使用 Twitter Bootstrap 框架创建了一个 Docpad 网站 我无法使 Bootstrap 的可选项卡或下拉菜单正常工作 它们呈现 但不运行 根据 Stackoverflow 的研究 这些 Bootstrap 函数似乎需要
  • CSS 字体在 Firefox 中不起作用

    我下面有这个字体代码 它在谷歌浏览器中工作正常 但在火狐浏览器中根本不起作用 为什么
  • 允许 iframe 跨域链接到目标父框架

    我有 2 个域 域 1 上的一个页面使用 iframe 加载域 2 中的内容 如何允许来自domain2 iframe 内 的链接在domain1 的完整父框架中打开 我一直在关注IE和w3c的新沙箱属性 http www w3 org T

随机推荐