在打印网页时 css设置了文字颜色透明度没效果

发布网友发布时间：2022-04-24 15:55

我来回答

共2个回答

热心网友时间：2022-04-21 02:58

那试过直接在数字上设置 opacity，有效果没。

热心网友时间：2022-04-21 04:16

可以通过rgba设置透明度来实现啊.思路如下:

先定义一个容器div, 设置这个容器的position为relative;

在这个容器中放置图片;

接着放置文字, 文字通过rgba设置透明度, position设为absolute, 通过调整top, left使文字达到想要的位置.

还有一种更好的办法是将图片设为容器的背景, 为容器指定宽高, 这样可以无需使用相对定位, 更容易使水印文字居中或处于理想位置.

以下代码我亲自测试了, 无论是在web中打印预览还是真实打印效果均有效.看328这个水印.如果你没效检查下浏览器和打印机, 推荐使用chrome浏览器.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <style>
        .img-container{
            position: relative;
            display: inline-block;
            text-align: left;
        }

        .watermark{
            position:absolute;
            top:40px;
            left:260px;
            font-size: 100px;
            font-weight: bold;
            color: rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="img-container">
        <img src="https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy//pic/item/8694a4c27d1ed21bc76ce603a06eddc450da3fab.jpg">
        <span class="watermark">328</span>
    </div>
</body>
</html>