重新着色图片广告以匹配网站主题

发布于 2024-08-16 20:35:55 字数 137 浏览 12 评论 0原文

这样做的最佳方法是什么？我想在网站上应用 Photoshop 式的图像广告颜色叠加。最好通过 CSS，但 javascript 也可以。我的第一个想法是放置一个具有与广告 div 相同宽度和高度的颜色的 div，并对其应用不透明度设置，以便它混合在一起。想法？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

弃爱 2024-08-23 20:35:55

如果我们谈论的是 Google AdSense，我很确定您不允许这样做，请阅读 Google AdSense 政策页面。

也就是说，唯一合理的解决方案是使用混合，但这会产生糟糕的结果，并且您直接违反了被页面上的元素遮挡策略规则。

回复收藏 0 原文

他是夢罘是命 2024-08-23 20:35:55

首先，我认为你的广告商不会高兴你改变他们的广告的配色方案（考虑品牌颜色等），但它应该是可行的。

使用具有背景颜色和不透明度的叠加层可能不会产生最令人满意的结果，但这是朝着您想要实现的目标迈出的一步。唯一的问题是覆盖层会使链接无法点击，因此必须这样做，以便广告图像位于底部，并且覆盖层实际上是链接。例如，这可能有效：

<div class="ad-container">
    <img src="ad_image.jpg" />
    <a href="www.ad.com">Real ad link</a>
</div>

在 CSS 中：

.ad-container {
    position: relative;
}

.ad-container a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f00;
    opacity: 0.5;
    filter: alpha(opacity=50); /* for IE */
    text-indent: -9999px; /* Hide text */
}

First of all, I dont think your advertisers would be happy at you changing the color scheme of their ads (think about brand colors etc), but it should be doable nevertheless.

Using a overlay with a background color and a opacity might not give the most pleasing result, but it's a step toward what you're trying to achieve. The only problem is that the overlay will make the link unclickable, so it has to be done so that the image for the ad is at the bottom, and the overlay is actually the link. For example, this might work:

<div class="ad-container">
    <img src="ad_image.jpg" />
    <a href="www.ad.com">Real ad link</a>
</div>

And in CSS:

.ad-container {
    position: relative;
}

.ad-container a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f00;
    opacity: 0.5;
    filter: alpha(opacity=50); /* for IE */
    text-indent: -9999px; /* Hide text */
}

回复收藏 0 原文

~没有更多了~