3

배경 이미지에 투명도가 적용된 색상 오버레이를 적용 해 보았습니다. 배경 이미지가 표시되고 코드가 정상적으로 작동하지만 더 효율적인 방법이있는 경우 이렇게하면 공유하십시오.background-color tint 효과가 배경 이미지에 적용됨

나는 시도하고 RGBA 값과 투명성, 아무것도 보여주지와 배경 색상을 적용 ...

어떤 제안이?

.call-to-action { 
color: #fff; 
background: url(images/cta-bg.jpg) no-repeat center center fixed; 
background-color: rgba(255, 255, 255, 0.5) !important; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
font-size: 18px; 
padding: 48px 12px; 
text-align: center; 
} 

http://i.stack.imgur.com/8iNun.png

+0

* 이미지는 * 이미지 앞에 * 적용됩니다. 색상 뒤에 이미지를 배치하려면 두 개의 컨테이너가 필요합니다. – Scott

+0

두 번째 이미지가 그라디언트 인 여러 배경 이미지를 사용하십시오. –

답변

9

사용

JSfiddle Demo

CSS

div { 
    width 200px; 
    height:200px; 
    margin: 25px; 
    border:1px solid grey; 
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0.5) 100%), url(http://lorempixel.com/output/city-q-c-200-200-1.jpg); 
} 
+0

건배 Paulie! 나는 그라데이션을 사용하여 이미지를 '배경'으로, 그 다음 '배경 이미지'로 나타냅니다. – Tom25

+0

완전히 GENIUS. –

0

U는 또한 혼합해야 할 두 번째 배경 이미지로 비 변화하는 그라데이션 :

background-blend-mode: multiply;