Перекрашивание графических объявлений в соответствии с темой сайта

Question

Каков наилучший способ сделать это? Я хочу по существу применить цветовой оверлей в фотошопе для графических объявлений на веб-сайте. Желательно через CSS, но javascript тоже подойдет. Моя первая идея заключалась в размещении элемента div с тем цветом, который я намереваюсь, с той же шириной и высотой, что и у элемента div, и применения к нему параметра непрозрачности, чтобы он сливался вместе. Мысли

Answer 1

Если речь идет о Google AdSense, я уверен, что вам не разрешено это делать, прочитайте страницу Правила Google AdSense .

Тем не менее, единственно разумным решением было бы использование смешивания, но это дает ужасные результаты, и вы прямо нарушаете правило политики Obscured by elements on a page.

Answer 2

Прежде всего, я не думаю, что ваши рекламодатели будут рады, если вы поменяете цветовую схему своих объявлений (подумайте о цветах бренда и т. Д.), Но, тем не менее, это должно быть выполнимо.

Использование наложения с цветом фона и непрозрачностью может дать не самый приятный результат, но это шаг к тому, чего вы пытаетесь достичь. Единственная проблема заключается в том, что оверлей делает ссылку не щелкающей, поэтому это нужно сделать так, чтобы изображение для рекламы находилось внизу, а оверлей фактически являлся ссылкой. Например, это может работать:

<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 */
}