Umfärbung Image-Anzeigen Website Thema passen

Question

Was wäre die beste Methode geht dies zu tun? Ich möchte im Wesentlichen eine Photoshop-artige Farbüberlagerung von Image-Anzeigen auf einer Webseite gelten. Vorzugsweise durch CSS, aber Javascript würde auch funktionieren. Meine erste Idee war, indem ein div mit der Farbe, die ich mit der gleichen Breite und Höhe wie die Anzeige div beabsichtige, und Anlegen eine Opazität, um es so eingestellt wird, dass sie zusammen mischen. Gedanken?

Answer 1

Zunächst einmal, ich glaube nicht, dass Ihre Werbe glücklich sein würde, bei Ihnen das Farbschema ihrer Anzeigen (man denke etwa Markenfarben usw.) zu ändern, aber es sollte machbar dennoch sein.

Mit einem Overlay mit einer Hintergrundfarbe und einer Opazität könnte das erfreulichste Ergebnis nicht geben, aber es ist ein Schritt in Richtung, was Sie erreichen wollen. Das einzige Problem ist, dass die Überlagerung wird der Link anklickbar machen, so hat es getan werden, damit das Bild für die Anzeige an der Unterseite ist, und das Overlay ist eigentlich der Link. Zum Beispiel könnte diese Arbeit:

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

Und 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

Wenn es Google AdSense wir reden, ich bin ziemlich sicher, dass Sie das nicht tun dürfen, lesen Sie die Google AdSense-Richtlinien Seite.

Das heißt, die einzig vernünftige Lösung wäre Blending, aber das gibt schrecklichen Ergebnisse, und Sie sind direkt auf die Obscured by elements on a page Richtlinienregel zu brechen.