html5加水印代码

在现今这个社会中，很多人会使用多媒体文件进行图片或视频分享。但是，很多人都会有担心自己的图片或视频会被盗用或者恶意使用的情况。因此，加水印就成为了一种很常见的方式。在下面的代码中，我们将使用HTML5来实现图片加水印的功能。

html>
    head>
    style>
.watermark {
    position: relative;
    width: 500px;
}
.watermark:after {
    content: "";
    background: url("watermark.png") no-repeat;
    opacity: 0.5;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
    /style>
    /head>
    body>
    div class="watermark">
    img src="example.jpg" alt="Example" />
    /div>
    /body>
    /html>
    

首先，在CSS样式表中，我们定义了一个名为“watermark”的类，将其设置为具有相对位置和500像素的宽度。然后，我们使用“:after”伪类添加了一个背景图片：我们的水印图片。

该CSS规则集指定了水印图像应如何显示。在这种情况下，它位于图像的上层，占据整个图像的空间，并将透明度设置为50％。这意味着它不会完全遮盖图像，因此，图像可以视觉上穿透水印。

最后，我们将使用水印的HTML标记，即“div class="watermark"> ”包裹图像，如上所示。底部的示例将在水印中添加一张名为“example.jpg”的图像。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！