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

【问题标题】：How can i insert a watermark to my banner in a website?如何在网站的横幅中插入水印？
【发布时间】：2020-12-08 05:01:57
【问题描述】：

我的网站中有一个横幅，我想在不需要编辑图像的情况下为其添加水印。我已经准备好水印徽标文件，但我需要正确的 HTML 代码来执行上述操作。

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

尝试使代码清晰并添加一些 cmets，以便我知道在哪里放置横幅和水印 URL。

下图提供了一个示例：

【问题讨论】：

请显示您的代码
欢迎来到 Stack Overflow。请查看how do I ask a good question。该站点是针对特定编程相关问题的。这个问题太宽泛了，无法展开讨论。

标签： html css wordpress elementor

【解决方案1】：

您需要先在页面上插入横幅，然后插入徽标，并使用一些 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”，这些坐标底部：200px 和左侧：50px，您可以通过更改这些来移动徽标价值。底部表示徽标必须离底部多远，在我们的示例中为 200px，因此如果您想将徽标向上移动，请增加 200px。

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

试一试，让我知道。你可以在这里找到源代码：https://jsfiddle.net/s29x5mv7/1/

【讨论】：