Ricolorazione annunci illustrati per abbinare tema del sito

Question

Quale sarebbe il metodo migliore per andare a fare questo? Voglio applicare essenzialmente una sovrapposizione di colore photoshop-esque di annunci illustrati su un sito web. Preferibilmente attraverso i CSS, ma javascript funzionerebbe anche. La mia prima idea stava mettendo un div con il colore che intendo con la stessa larghezza e altezza del div annuncio, e l'applicazione di una regolazione ad esso in modo che si fonde insieme l'opacità. Pensieri?

Answer 1

Prima di tutto, non penso che gli inserzionisti sarebbero felici a voi cambiare la combinazione di colori dei loro annunci (pensare a colori del marchio, ecc), ma dovrebbe essere fattibile, tuttavia.

Utilizzo di un overlay con un colore di sfondo e un'opacità potrebbe non dare il risultato più gradito, ma è un passo verso quello che stai cercando di raggiungere. L'unico problema è che la sovrapposizione farà il link cliccabile, quindi deve essere fatto in modo che l'immagine per l'annuncio si trova in basso, e la sovrapposizione è in realtà il collegamento. Per esempio, questo potrebbe funzionare:

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

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

Answer 2

Se è Google AdSense di cui stiamo parlando, sono abbastanza sicuro che non ti è permesso di farlo, leggete la noreferrer norme di Google AdSense pagina.

Detto questo, l'unica soluzione ragionevole sarebbe utilizzando la miscelazione, ma che dà risultati terribili, e si sta rompendo direttamente la regola del criterio Obscured by elements on a page.