打印时显示水平线的文本区域答案

【问题标题】：Textarea with horizontal rule showing up on print打印时显示水平线的文本区域
【发布时间】：2016-03-20 15:35:31
【问题描述】：

我目前正在开发一个网站，用户可以在该网站上查看客户在网站上提出的机械请求。然后他们可以打印请求。

我正在尝试仅在印刷版的请求中添加“注释”部分。我正在使用引导程序，所以很容易隐藏它直到打印。

我的问题是我想在 textarea 中有水平线，就像这个答案：<textarea> with horizontal rule

这些线条在 textarea 上效果很好。问题是调用 window.print() 时它们没有出现

在页面上：

打印时：

有没有办法让它出现在印刷版上？

<dt class="visible-print">
    Notes
</dt>

<dd class="visible-print">
    <textarea class="notes" rows="10" cols="100"></textarea>
</dd>

.notes {
    background-image: -webkit-linear-gradient(left, white 10px, transparent 10px), -webkit-linear-gradient(right, white 10px, transparent 10px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -moz-linear-gradient(left, white 10px, transparent 10px), -moz-linear-gradient(right, white 10px, transparent 10px), -moz-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -ms-linear-gradient(left, white 10px, transparent 10px), -ms-linear-gradient(right, white 10px, transparent 10px), -ms-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -o-linear-gradient(left, white 10px, transparent 10px), -o-linear-gradient(right, white 10px, transparent 10px), -o-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: linear-gradient(left, white 10px, transparent 10px), linear-gradient(right, white 10px, transparent 10px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-size: 100% 100%, 100% 100%, 100% 31px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    line-height: 31px;
    font-family: Arial, Helvetica, Sans-serif;
    padding: 8px;
}

【问题讨论】：

标签： html css printing textarea

【解决方案1】：

大多数人的浏览器都设置为默认选项“不打印背景”。深色背景页面会很快耗尽您的墨水！如果您的“线条”是利用“背景”实现的，它们将不会打印。

作为一种解决方法，请尝试创建一个独立的图像。适当设置它的 z-index（记得使用位置），然后从屏幕 css 中隐藏它，只为打印 css 显示它。

【讨论】：

我不知道该怎么做。我是html和css的初学者，请添加示例
您能更具体地说明您遇到的问题吗？用 z-index 堆叠东西？或者创建单独的打印/屏幕 css 文件？还有什么？
您确实意识到这个问题已经超过 4 个月了，对吧？如果我现在还没有设法让它工作，显然最后期限是很久以前的事了。除了使用我需要的线条手动创建图像，然后在不打印时将其隐藏在 css 中之外，我没有设法做您所说的任何事情。这就是我将其标记为已接受的原因，因为这个想法确实有效，尽管这不是你的主要观点（我不明白）
我很抱歉；那时我没有看到你的评论。很抱歉让你陷入困境。
@KaitoKid，如果 cmets 不再相关，您应该删除寻求帮助的 cmets。仅仅因为你让它工作，或者截止日期已经过去，并不意味着你对改进解决方案仍然不感兴趣。

【解决方案2】：

这已在与<textarea> 在打印前呈现的类似情况下报告。一个值得考虑的解决方案是将<textarea> 复制为标准<div> 或在调用打印之前/调用打印时的其他元素。

可以在此处找到显示如何使用 jQuery 替换 <textarea> 示例的资源：@987654321@。

【讨论】：