Nueva aplicación de color para que coincida con los anuncios gráficos tema del sitio web

Question

¿Cuál sería el mejor método de ir haciendo esto? Quiero aplicar esencialmente una superposición de color Photoshop al estilo de los anuncios de imagen en un sitio web. Preferentemente a través de CSS, pero JavaScript funcionaría también. Mi primera idea fue la colocación de un div con el color que pretendo con la misma anchura y altura que el anuncio div, y aplicando un ajuste de a ella para que se funda junto opacidad. Pensamientos?

Answer 1

En primer lugar, ¡no creo que sus anunciantes serían felices en que el cambio de la combinación de colores de sus anuncios (pensar en colores de la marca, etc.), pero debe ser factible, sin embargo.

El uso de un recubrimiento con un color de fondo y una opacidad podría no dar el resultado más agradable, pero es un paso hacia lo que estamos tratando de lograr. El único problema es que la superposición hará que el enlace permite hacer clic, por lo que tiene que hacer para que la imagen para el anuncio es en la parte inferior, y la superposición es en realidad el enlace. Por ejemplo, esto podría funcionar:

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

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

Answer 2

Si se trata de Google AdSense que estamos hablando, estoy bastante seguro de que no está autorizado a hacer eso, lea la noreferrer políticas de Google AdSense página.

Dicho esto, la única solución razonable sería el uso de la mezcla, pero que da resultados terribles, y que está rompiendo directamente la regla de política Obscured by elements on a page.