英文:
div element is not visible on print page
问题
我有一张表格。在表格上方，我创建了一条水平线。当我点击打印按钮时，整个页面都显示出来，除了那些线条。这些线条是通过以下方式生成的：
$attachLinesTo = $('#dataset-wrap')
function createLine(x1, y1, l, colorClass) {
return $('<div>')
.appendTo($attachLinesTo)
.addClass('line ' + colorClass)
.css({
position: 'absolute',
})
.width(l)
.offset({
left: x1,
top: y1
});
}
在正常视图（非打印）下，页面显示一切正常。只有在打印页面上，这些线条才会消失。
我想在打印视图中显示这些线条。
以下是CSS：
.line {
transform-origin: 0 100%;
height: 1px;
border: 0;
}
.black {
background-color: black;
}
英文:
I have a table. Above the table, I create a horizontal line. When I click on the print button, the whole page is showing except the lines. The lines are generated as follows:
$attachLinesTo = $('#dataset-wrap')
function createLine(x1, y1, l, colorClass) {
return $('<div>')
.appendTo($attachLinesTo)
.addClass('line ' + colorClass)
.css({
position: 'absolute',
})
.width(l)
.offset({
left: x1,
top: y1
});
}
In the normal view (without printing) the page is showing everything correct. Only on the print page, the lines are missing.
I want to show the lines in the print view.
Here the css:
.line {
transform-origin: 0 100%;
height: 1px;
border: 0;
}
.black {
background-color: black;
}
答案1
得分: 1
默认情况下，您的浏览器不会打印背景颜色。
您必须在浏览器中启用背景打印，或者只需使用一个高度为1px的border-top（或border-bottom），那应该可以工作。
.line {
transform-origin: 0 100%;
}
.black {
border-top: 1px solid #000;
}
<div class="line black"></div>
英文:
By default, your browser doesn't print background colors.
You have to either enable background printing in your browser, or just use a border-top (or border-bottom) that is 1px and that should work.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.line {
transform-origin: 0 100%;
}
.black {
border-top:1px solid #000;
}
<!-- language: lang-html -->
<div class="line black"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论