@media print颜色样式不起作用

最新推荐文章于 2024-08-07 14:51:47 发布

666小肥肥666

最新推荐文章于 2024-08-07 14:51:47 发布

阅读量3.9k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_41115103/article/details/106538333

版权

当在CSS中使用@media print定义打印样式时，发现颜色设置无效。原来浏览器默认将打印颜色设置为黑色。要改变这种情况，需要重写浏览器的默认颜色。通过修改代码并进行测试，可以成功让打印样式中的颜色正常显示。

摘要由CSDN通过智能技术生成

预期效果：

在这里插入图片描述

原代码：

/*  打印样式*/
@media print {
    
	 #contendmidd tr{
   
		line-height: 13px;
	 }	 
	td.tdStyle {
   		
        color: red !important;

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

666小肥肥666

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
9
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue中使用@media媒体查询失效问题

weixin_44083426的博客

07-26

1万+

Vue媒体查询失效原因网上总结的比较多，因为这是接手的项目，还不够熟悉代码，一一排查得到了一下结果： // 出错位置 <meta name="viewport" content="user-scalable=0"> 这个meta在html页面当中，vue只有一个这一个页面，会把所有模板放里面，我的这个html结构文件是index.html 以下是修改方式： <meta nam...

js print 预览样式无效_使用jquery.PrintArea.js打印网页的样式问题

weixin_39880899的博客

12-20

384

在使用jquery.PrintArea.js打印局部网页样式的时候，发现样式打印不出来，在网上找了好多资料，整理一下分享给大家一、先看看css的引用文件方式1、直接在内部的元素中使用”style”属性来定义样式，比如：2、在元素中使用”style”元素来指定3、使用元素链接到外部的样式文件，比如：这三种是比较常见的方式二、第一种方式：直接在内部的元素中使用”style”属性来定义样式，然后调用pr...

9 条评论您还未登录，请先登录后发表或查看评论

window.print()打印样式不生效的问题

weixin_52509007的博客

05-27

5213

// 打印表格 printFn() { this.isPrint = true this.$nextTick(() => { let printHtml = document.getElementById('table').innerHTML // document.querySelector('body').style.width = width.clientWidth + 'px' // document.que..

关于@media样式不生效的问题

欢迎

12-01

1224

@media样式没作用

使用 CSS 打印样式为 Web 页面设置专业的打印机效果

热门推荐

记录点滴

02-22

1万+

最近项目中使用打印功能，使用vue-print-nb最后打印没有样式，刚开始以为是不支持css预处理（scss、stylus），结果发现不是这个问题，真正原因是：下边是需要打印的div，在写css样式的时候，这个div不可以让父级给包裹（也就是不可以有别的父级包裹这个div），且父级不可以有样式！！！、打印时候没样式多数是这个问题！！！ ...

关于printJs预览时样式失效问题

weixin_71146793的博客

07-01

448

设置了分页，用法就是在需要分页的地方加一个<h1></h1>即可。printJs是无法将通过class="***"的样式进行渲染的，需要将其写在行内样式style="***"中才可以，另外还可以在，css中控制其样式，比如。

详解CSS3中@media的实际使用

09-25

在这里，`<media-type>`指定了设备类型，如`screen`（屏幕）、`print`（打印）等，而`<media-feature>`则用于指定设备的具体特性，例如宽度、高度、颜色指数等。常见的`<media-type>`包括： 1. `all`：适用于所有...

置不同屏幕中，元素的位置不会发生改变的是( )A、@media screen B、@media mouse C、@media key D、@media print

06-08

其中，@media print 规则用于指定打印页面时的样式，可以控制页面的布局、字体、颜色等。和普通的 CSS 样式一样，@media 规则可以包括各种 CSS 属性和值。使用 @media print 规则可以确保在不同的打印设备上，元素...

在CSS中，你可以使用 @media 打印样式规则来为打印页面设置不同的样式。例如，你可以为打印页面设置不同的字体、颜色和边距等等。这样可以确保在打印时，页面的样式和布局能够得到正确的呈现。 @media print { /* 打印页面的样式规则 */ } 具体有哪些规则

05-27

在 @media print 中，你可以为打印页面设置各种 CSS 样式规则，以下是一些常用的打印样式规则： 1. 设置字体大小和颜色： ``` @media print { body { font-size: 12pt; color: #000000; } } ``` 2. 隐藏某些...

html页面打印时背景颜色无效的解决方案

chuyi4253的博客

04-09

3207

我遇到的情况是，在引入bootstrap框架之后，想打印自己的个人简历页面，发现之前设定的样式，背景颜色通通变得无效，问题原因是bootstrap.css的默认样式， @media print { *, *:before, *:after { color: #000 !i...

@media使用不生效问题/Ant design of vue修改样式不生效问题

smilling sky的博客

07-28

3036

1.@media使用不生效问题 @media不生效写法：@media screen and(max-width:992px){ } 错误原因： and和(之间应该有空格，没有空格就不生效。正确写法：@media screen and (max-width:992px){ } @media详细知识点：https://www.runoob.com/cssref/css3-pr-mediaquery.html 2.Ant design of vue修改样式不生效问题修改Ant design of vue的样式

React中打印页面，样式不起作用

fydxx的博客

02-20

2328

从网上搜索的结果来看，一种方法就是使用内联样式，但是很明显如果我们的页面中有很多元素，并且页面的动效多的时候，内联样式就不可取了，既不雅观将来也不好维护。还有一种方式就是使用react-to-print这个插件来做，这里我并没有用到。我最近也遇到了React中调用window.print打印页面，但是样式不起作用的问题。我的解决方法是使用了媒体查询，把打印时需要用到的样式放到@media...

摘录 -------------------------- css3 @media不起作用是什么原因？怎么解决？

歌布衣的博客

09-07

587

https://www.jiangweishan.com/article/yidogn20200601.html

关于@media不生效的问题和meta总结

weixin_34167043的博客

06-27

1233

1：之前做的是两套页面。现在改成响应式布局。发现加上 @media only screen and (max-width: 500px){ .gridmenu{width:100%; } .gridmain{width:100%; } .gridright{width:100%; }} 诸如上面的样式表...