如何在网站的横幅中插入水印？

问题描述

我的网站内有一个横幅，我想在其中添加水印而不需要编辑图像。我已经准备好水印徽标文件，但是我需要正确的HTML代码才能完成上述操作。

如果有什么可以帮助我的，请共享我需要在网站内任何位置插入以显示带有水印的横幅的正确HTML代码。

尝试使代码清晰并添加一些注释，以便我知道将横幅和水印URL放置在何处。

下图中提供了一个示例：

解决方法

您将需要首先在页面上插入横幅，然后插入徽标，并使用一些CSS将徽标放置在横幅的顶部。这是您需要的代码。

<div>
<img style="" src="https://i.stack.imgur.com/wmjp6.jpg" width="1366" height="auto">
<img style="     position: relative;
    bottom: 200px;
    left: 50px;
" src="https://optic-communications.com/wp-content/uploads/2017/05/logologo.png" width="150px" height="auto">
</div>

上面的代码将插入横幅，然后在横幅顶部的特定位置插入另一个图片“ logologo.png”，其坐标为Bottom：200px和left：50px，您可以通过更改这些来移动徽标值。底部表示徽标必须与底部相距多少（在我们的示例中为200像素），因此，如果要向上移动徽标，请增加200像素。

请确保将徽标URL更改为要使用的徽标。

尝试一下，让我知道。您可以在此处找到源代码：https://jsfiddle.net/s29x5mv7/1/