웹 사이트 테마와 일치하는 이미지 광고를 다시 콜링합니다

StackOverflow https://stackoverflow.com/questions/2014944

문제

이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 웹 사이트에 이미지 광고의 Photoshop-esque 색상 오버레이를 본질적으로 적용하고 싶습니다. 바람직하게는 CSS를 통해이지만 JavaScript도 작동합니다. 나의 첫 번째 아이디어는 광고 div와 같은 너비와 높이로 의도 한 색상의 div를 배치하고 불투명도 설정을 적용하여 함께 혼합되었습니다. 생각?

도움이 되었습니까?

해결책

우선, 나는 당신의 광고주가 광고의 색 구성표를 바꾸는 데 기뻐할 것이라고 생각하지만 (브랜드 색상에 대해 생각하십시오) 그럼에도 불구하고 가능해야합니다.

배경색과 불투명도로 오버레이를 사용하면 가장 유쾌한 결과를 얻을 수는 없지만 달성하려는 한 단계입니다. 유일한 문제는 오버레이가 링크를 불가능하게 만들 것이므로 광고의 이미지가 맨 아래에 있고 오버레이가 실제로 링크라는 것입니다. 예를 들어, 이것은 효과가있을 수 있습니다.

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

다른 팁

Google 애드 센스라면 우리가 이야기하고 있다면, 당신이 그렇게 할 수 없다고 확신합니다. Google 애드 센스 정책 페이지.

즉, 유일한 합리적인 솔루션은 블렌딩을 사용하는 것이지만 끔찍한 결과를 얻을 수 있으며 직접 파괴하고 있습니다. Obscured by elements on a page 정책 규칙.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top