首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

打印CSS中的图标不保留颜色

是指在打印页面时,CSS样式中的图标将不会显示其原有的颜色。这通常是因为打印页面需要节省墨水或者为了更好地适应打印机的黑白输出而设计的。

为了实现打印CSS中的图标不保留颜色,可以采取以下几种方法:

  1. 使用打印样式表:在CSS中,可以通过@media print媒体查询来定义打印样式表。在打印样式表中,可以将图标的颜色设置为黑色或其他适合打印的颜色,以确保打印时不保留原有的颜色。
  2. 使用SVG图标:SVG(可缩放矢量图形)是一种基于XML的图像格式,可以通过CSS进行样式控制。在打印样式表中,可以将SVG图标的颜色设置为黑色或其他适合打印的颜色,以确保打印时不保留原有的颜色。
  3. 使用字体图标:字体图标是一种使用字体文件来显示图标的方法。在打印样式表中,可以将字体图标的颜色设置为黑色或其他适合打印的颜色,以确保打印时不保留原有的颜色。
  4. 使用图片替代:如果图标是通过CSS的background-image属性设置的,可以在打印样式表中将其替换为适合打印的图片,以确保打印时不保留原有的颜色。

总结起来,为了实现打印CSS中的图标不保留颜色,可以使用打印样式表、SVG图标、字体图标或者图片替代的方法来调整图标的颜色,以适应打印需求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

css样式颜色格式

颜色对于 css 来说是非常重要,网站之所以会呈现出五彩斑斓样式,就是这些颜色样式起作用。在 css ,对于颜色样式有很多种表达方式,今天我们就来盘点下 css 颜色格式。...名字颜色css ,默认定义了很多名字颜色,比较常见比如 yellow,blue,red,pink 等,实际上,css 中一共定义了 140 个颜色名字,这些名字你都可以直接拿来使用。...在 css ,red,green,blue 被称作三通道,每个通道值是从 0-255,通过混合这些通道颜色,我们就可以创造出 1600 多万种颜色。...在 HSL ,我们色调是在 0deg-360deg 之间,转一圈大致颜色范围就是红橙黄绿青蓝紫,饱和度是在 0-100%之间,亮度是在 0%-100%之间。...在 HSL ,饱和度范围从 0%(无饱和)到 100%(完全饱和)。这是可能,因为我们知道我们正在谈论 sRGB 色彩空间,一个有限调色板。

2.2K30

python打印有不同颜色

目的:使用python时,改变在终端里输出颜色和样式。...环境:ubuntu 16.4  python 3.5.2 情景:在写小脚本时,我们如果不需要输出到文件,也许只是想在终端显示信息,这时可以尝试改变输出文字颜色和样式,突出显示或者只是想秀一下。...查了一点资料: 终端字符颜色是用转义序列控制,是文本模式下系统显示功能,和具体语言无关。...转义序列是以 ESC 开头,可以用 \033 完成相同工作(ESC ASCII 码用十进制表示就是 27, = 用八进制表示 33)。...红)、36(青色)、37(白色) 3) 背景色:40(黑色)、41(红色)、42(绿色)、 43(×××)、44(蓝色)、45(洋 红)、46(青色)、47(白色) 比如: \033[0m 使用默认样式

2K30
  • CSShover出现生效几个原因 ?

    在设置CSShover时,有时会发现hover不起作用, 总结一下原因: 提示:在 CSS 定义,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效。...提示:在 CSS 定义,a:active 必须被置于 a:hover 之后,才是有效。...1.在设置:hover前加空格: 比如: .one { margin: 0 auto; width: 400px; height: 300px...,而经过one里面的其他div背景颜色发生变化, 说明:hover前加空格,本身不会有:hover效果,而后代元素会有:hover效果。...2.当鼠标经过时,让其他元素改变样式: 这时候你会发现,只有后代元素和兄弟元素(紧接在元素后兄弟元素)才有效果,其他:hover会失效 还是上个例子 把: .one :hover { background

    2.7K20

    使用纯CSS给网站文章外链添加小图标

    最近突然有一个想法,文章链接不够明显,可不可以在不修改类名前提下,给所有 a 标签添加一个图标呢? 答案是肯定,只有想不到,没有做不到。...我们可以分析一下, bootstrap 组件图标库。 它们在图标标签上加了一个伪类,这个伪类就代表了相对应图标。 那么我可以直接拿这个标识来用吗?...我们先看一下字体 CSS 源码,这里以阿里图标 iconfont 生成 CSS 文件为例: @font-face {font-family: "iconfont";   src: url('iconfont.eot...也可以直接生成 Unicode 代码,放在你 CSS 样式文件开头,就可以愉快给某个元素批量设置自定义图标了。...未经允许不得转载:w3h5-Web前端开发资源网 » 使用纯CSS给网站文章外链添加小图标

    44950

    使用纯CSS给网站文章外链添加小图标

    最近突然有一个想法,文章链接不够明显,可不可以在不修改类名前提下,给所有 a 标签添加一个图标呢? 答案是肯定,只有想不到,没有做不到。...我们可以分析一下, bootstrap 组件图标库。 它们在图标标签上加了一个伪类,这个伪类就代表了相对应图标。 ? 那么我可以直接拿这个标识来用吗?...我们先看一下字体 CSS 源码,这里以阿里图标 iconfont 生成 CSS 文件为例: @font-face {font-family: "iconfont";   src: url('iconfont.eot....article-content p a[target=_blank]:after {   content: "\e989"; } 当然,可以把 iconfont 下载到本地,把 iconfont.css...也可以直接生成 Unicode 代码,放在你 CSS 样式文件开头,就可以愉快给某个元素批量设置自定义图标了。

    1.7K30

    CSS遇上表单控件

    form-css-not-working 可以看到文字颜色明显差异,对应HTML结构与CSS样式如下: <!...,边框颜色图标装饰等都应该考虑进去 比较隐蔽一点是,表单元素这种差异在开发环境无法发现,如下图: ?...当然,在开发过程尽早真机自测很容易发现问题,但更应该从实现方案上避免这种情况 P.S.这个案例场景主要是因为偷懒,可交互表单页与不可交互分享页共用了相同HTML结构,所以直接给textarea设置了...,比如input高亮黄框 不一定会保留保留东西,比如select箭头图标、checkbox无法选中 四.结论 有人专门深入研究过这个问题,并做了很多实验: using CSS to style form...总之: 对表单控件应用CSS样式,需要特别小心,因为规范不保证有效,那么在多平台下效果可能不一致 建议对表单元素大幅度定制样式,环境兼容性很脆弱,要么保留原生样式,要么完全自定义(比如手动实现select

    90330

    CSS从基础到熟练学习笔记(三)CSS5种背景属性(背景颜色、背景图片、固定背景图片等)

    CSS背景属性用于定义元素背景效果,常用有5种背景属性:背景颜色、背景图片、背景图片重复展示方式、背景附着方式以及背景位置 background-color background-image background-repeat...background-attachment background-position 背景颜色background-color CSS可以通过background-color属性指定元素背景颜色,例如指定...body元素背景颜色: body { background-color: lightblue; } 颜色表示方式也有3,具体可参见RGB颜色对照表以及详细介绍CSS三种颜色表示方式 背景图片...background-image CSS通过background-image属性指定元素背景图片。.../20161118220122095"); } 背景图片显示方式background-repeat CSS通过background-repeat属性指定背景图片展示方式。

    1.1K10

    TDesign 更新周报(2022年7月第4周)

    Variable 替代,存在兼容更新Rate: 移除 color 属性,使用 CSS Variable 替代 ,存在兼容更新Rate: external-classes 属性 t-class-desc...更名为 t-class-text,存在兼容更新Search: 将 external-classes 属性 t-class-cancel 更名为 t-class-action,存在兼容更新 FeaturesTabs...: 新增 CSS Variable 调整宫格背景、文本等颜色,具体查看文档Search: 新增 CSS Variable 调整 Search 字体、背景、图标颜色,具体查看文档Rate: 新增 CSS...Variable 调整 Rate 辅助文本、选中、未选中及禁用态图标颜色,具体查看文档Input: 移除 external-classes 属性 t-class-placeholderInput:...Variable 调整 Input 字体、背景、图标颜色,具体查看文档Divider: 新增 CSS Variable 调整分割线、文本颜色,具体查看文档Indexes: 新增 CSS Variable

    2.1K40

    【译】Web图像技术总结,前端开发各种图片引入优点缺点及实例

    你注意到了吗,右边图片即使还没有加载也会保留其空间吗?这是因为宽度和高度已经设置好了。它有明显区别! Demo 1.2 用CSS隐藏图片 可以用CSS隐藏图片,但是它仍然会被加载到页面。...您必须先检查元素,然后在DevTools url 打开链接,然后才能下载随CSS添加图像。 2.6 伪元素 可以使用伪元素与CSS背景图片一起使用,例如,在图片顶部显示一个叠加元素。...background-size: 20px 20px; background-position: left 10px center; background-repeat: no-repeat; } 要更改焦点上图标颜色...Yoksel这个工具很棒。 Demo 4.6 CSS 打印 用户可能需要打印web页面。假设我们有一份食谱,你想把它打印出来,这样你就可以在厨房里看它,而不需要查看你手机或电脑。...对于包含说明性步骤菜谱,重要是将它们打印出来,否则用户将无法从打印web页面获得任何好处。

    5.6K20

    非样式布局

    font-family: IF; } 先获取远程css,远程css已经包含了字体定义,然后 直接引用 css包含字体。...自定义图标库: 到iconfont.cn 选择图标->加入购物车->添加至项目->下载 ---- 非布局样式 - 行高 * 行高构成 行高是由line-box决定,line-box...- 是否保留单词:当行尾单词很长时,如果 保留单词(单词 不换行进行显示),不保留(单词打断 换行进行显示) * word-break 针对多字节文字(把单词看做一个单位,还是把字母看作一个单位)...如果这些小图标颜色接近 可以减少 雪碧图大小。...图标字体:把图标做成文字,给他定义成特别的字体,在需要使用地方 引入该字体。 * base64使用 把图片变成文本一种方式,然后把base64字符串 内嵌到css 进行使用。

    1.8K20

    CSS伪元素妙用--单标签之美

    对于 CSS2 已经有的伪元素,例如 :before,单冒号和双冒号写法 ::before 作用是一样。...雪碧图大家应该也陌生,通过将多个图片 icon 合为一张图,从而为了减少 http 请求,很多网站对雪碧图需求还是很大。...譬如上面这种情况(假设按钮图标是采用了雪碧图),产品某天突然要求按钮从状态左变为状态右,那么雪碧图原先预留位置边距肯定就不够了,导致其他图形出现在按钮。...也就是在元素末尾添加了一个换行符意思。 而 white-space: pre; 作用是保留元素后面的空白符和换行符,结合两者,就可以轻松实现在行内级元素末尾实现换行。 原文Demo。...一个标签其实可以相当于 3 个标签来使用,而配合 CSS3 强大 3D 变换、多重背景,多重阴影等手段,让单标签作画成为了可能,下面是我仅用单个标签,实现一些动画效果: 单标签实现浏览器图标: ?

    1.6K100

    2021 年 Web 开发常用五个图标库(建议收藏)

    顾名思义,Font Awesome 使用字体而不是图像,因此在免费版和专业版,它都提供了像素完美的图标,简单 CSS 样式,托管工具包,强大转换以及轻松升级。...Font Awesome 没有提供 Icon8 或 Flaticoin 之类编辑选项,但为你提供了 CSS 类,可以直接在 HTML 定义使用。...提供 CSS 类,Unicode 和 SVG 格式图标。 可以使用纯 CSS 直接更改图标的基本属性(颜色、阴影、背景等)。 可以轻松升级到最新版本。...由于 Fontisto 支持 CSS,所以可以直接对图标CSS 属性进行修改,包括图标大小、颜色、背景等。...你可以在 Streamline 创建一个免费账户并开始使用图标,也可以直接将整个图标集下载到你设备上。

    1.4K30

    2021 年 Web 开发常用五个图标库(建议收藏)

    顾名思义,Font Awesome 使用字体而不是图像,因此在免费版和专业版,它都提供了像素完美的图标,简单 CSS 样式,托管工具包,强大转换以及轻松升级。...Font Awesome 没有提供 Icon8 或 Flaticoin 之类编辑选项,但为你提供了 CSS 类,可以直接在 HTML 定义使用。...提供 CSS 类,Unicode 和 SVG 格式图标。 可以使用纯 CSS 直接更改图标的基本属性(颜色、阴影、背景等)。 可以轻松升级到最新版本。...由于 Fontisto 支持 CSS,所以可以直接对图标CSS 属性进行修改,包括图标大小、颜色、背景等。...Streamline 图标库以其对优化草图支持而出名,这使得操作图标宽度和颜色变得容易。你可以在 Streamline 创建一个免费账户并开始使用图标,也可以直接将整个图标集下载到你设备上。

    1.4K10
    领券