blocks|key|849464|text|默认情况下，不打印背景色和图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|849465|这是一个你的用户可以更改的打印机选项，但你绝对不能指望你的用户知道或这样做。你不能从web端控制这个(据我所知)。|849466|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>Background colors and images don't print by default.</p>

<p>It is a printer option your users could change, but you absolutely can't count on your users knowing or doing that. You cannot control this from the web side (as far as I know).</p>


blocks|key|849525|text|但是，您可以始终使用图像来实现此目的。制作一个宽度为1px的图像，然后重复如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|849526|background:+url('path/to/image.png')+repeat-x;|code-block|syntax|javascript|849527|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You could however always use an image for that. Make an image with a width of 1px and repeat it like this:</p>

<pre><code>background: url('path/to/image.png') repeat-x;
</code></pre>


blocks|key|849580|text|当我使用固定大小的块元素时，这里有一些对我有用的东西。使用的图像是1px+x+1px，但被强制扩展到盒子的大小。这样我们就可以直接打印图像，而不是背景颜色/图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|849581|<style+type="text/css">
.outer+{
++++width:+200px;
++++height:+80px;
++++position:+relative;
}
.outer+.grayBg+{
++++position:+absolute;
++++left:+0;
++++top:+0;
++++height:+80px;
++++width:+100%25;
++++z-index:+1
}
.inner+{
++++width:+100%25;
++++position:+relative;
++++z-index:+10
}
</style>


<div+class="outer"><img+src="grayBg.png"+class="grayBg"+/>
++<div+class="inner">Some+text</div>
</div>|code-block|syntax|javascript|849582|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is something worked for me as I was using Fixed size block element. The image used is 1px X 1px but forced to expand to the size of box. This way we are printing image directly instead of background color/image. </p>

<pre><code>&lt;style type="text/css"&gt;
.outer {
    width: 200px;
    height: 80px;
    position: relative;
}
.outer .grayBg {
    position: absolute;
    left: 0;
    top: 0;
    height: 80px;
    width: 100%;
    z-index: 1
}
.inner {
    width: 100%;
    position: relative;
    z-index: 10
}
&lt;/style&gt;


&lt;div class="outer"&gt;&lt;img src="grayBg.png" class="grayBg" /&gt;
  &lt;div class="inner"&gt;Some text&lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|633176|text|CSS：box-shadow:+inset+0+0+0+1000px+gold;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|633177|适用于所有浏览器以及表格单元格和行。|633178|entityMap^0|4|10|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

<p>CSS: <code>box-shadow: inset 0 0 0 1000px gold;</code></p>

<p>Works for all browsers and on table cells and rows.</p>


blocks|key|633285|text|在Crome中"-webkit-print-color-adjust:+exact;“适用于我。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|633286|使用：|633287|@media+print+{
++++.collage_bg+{
++++++++background-color:+#E6E7E9+!important;
++++++++-webkit-print-color-adjust:+exact;+
++++}
}|code-block|syntax|javascript|633288|或选中背景图形选项：|633289|📷|atomic|offset|length|633290|​|633291|这两种选择对我来说都很好。|633292|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/82ba4c8ae3de005817e577ec3100053c.png|imageAlt^0|0|0|0|0|0|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|16|8|@]|9|@$N|17|O|18|1|19]]|A|$]]|$1|P|3|Q|5|6|7|1A|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1B|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10|11|-4]]]]

<p>In Crome "-webkit-print-color-adjust: exact;" works for me.</p>

<p>Use: </p>

<pre><code>@media print {
    .collage_bg {
        background-color: #E6E7E9 !important;
        -webkit-print-color-adjust: exact; 
    }
}
</code></pre>

<p>Or Check Background Graphics option:
<a href="https://i.stack.imgur.com/1aHDA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1aHDA.png" alt="enter image description here"></a></p>

<p>Both options working fine for me.</p>


<p>I want use a <code>div</code> that has a <code>background-color</code>, but if I print the page it appears in white .</p>

<p>When I create a table using <code>&lt;tr bgcolor="#333333"&gt;</code> it also does not work.</p>

<p>How I can create a print page using <code>css</code> and <code>html</code> ?</p>

<p>My code :</p>

<pre><code>&lt;table border="0px" cellspacing="1" cellpadding="0" bgcolor="#777777" width="650px"&gt;
   &lt;tr bgcolor="#999999"&gt;
       &lt;td align=right colspan=2&gt;&lt;span style="font:bold 14px 'b nazanin';"&gt;Text&lt;/span&gt;&lt;/td&gt;
   &lt;/tr&gt;
&lt;/table&gt;
</code></pre>


div background color in print page doesn't work

我想使用具有background-color的div，但如果我打印页面，它将显示为白色。当我使用<tr bgcolor="#333333">创建一个表时，它也不能工作。如何使用css和html创建打印页？我的代码：<table border="0px" cellspacing="1" cellpadding="0" b...

问打印页面中的div背景色不起作用
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问打印页面中的div背景色不起作用EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问打印页面中的div背景色不起作用
EN