多广告图+右下角带“广告”小图标广告位源代码

最新推荐文章于 2025-08-05 09:34:35 发布

原创

最新推荐文章于 2025-08-05 09:34:35 发布 · 1.5k 阅读

标签

#html #css #前端

收录于

这篇博客分享了一种利用HTML和CSS在广告横幅图片的右下角添加'广告'标识的方法。这种方法不是在图片上直接加水印，而是通过代码实现，使得标识在复制或单独打开图片时不会显示。代码示例中展示了如何将'广告'标识定位在图片右下角。

大家是不是看到很多网站广告横幅图片右下角都有“广告”两个字
可能有人以为是制作图片的时候就加了水印标识广告二字
其实这并不是制作的时候加上的，当你复制保存或新网页单独打开图片
会发现右下角却没有广告两个字，这就说明是利用代码加上的广告两个字
代码如下：

<table width="100%; cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="position: relative;">
<a href="https://www.58soho.cn.html/" target="_blank"><img src="https://www.58soho.cn/" width="100%" height="100" /></a>
<div style="position:absolute;z-index:2;right:1px;bottom:1px;width:25px;height:15px;background:url(https://www.58soho.cn/) no-repeat;"></div>
</td>
</tr>
<tr>
<td style="position: relative; padding-top: 5px;">
<a href="https://www.58soho.cn.html/" target="_blank"><img src="https://www.58soho.cn/" width="100%" height="100" /></a>
<div style="position:absolute;z-index:2;right:1px;bottom:1px;width:25px;height:15px;background:ur