CSS 이미지 위에 텍스트를 더 가깝게 보이게하십시오.

Question

저는 지금 몇 가지 작업을하고 있습니다.

기본적으로 내가하려는 것은 내 이미지 위에 검은 불투명 한 "화면"을 넣는 것이므로 너무 밝지 않으므로 이미지 위에 텍스트의 내용을 읽을 수 있습니다.

예는 여기 특집 :

이 내가 현재 가지고있는 것입니다.

<div class="overlay"> 
    <span class="front-coffee block"></span> 
    <p class="center">Coffee Shop</p> 
</div> 

div.overlay{background: black; z-index: 5; width:100%; height:100%;} 
.block { display: block; } 
div.popularCategory p{font-size: 24pt; color: white; margin-top:-50px} 
span.front-coffee{background:url('../img/categories/coffee.jpg') no-repeat center; zoom:0.65; width:100%; height:100%; z-index: 4} 

Answer 1

만약 내가 당신을 올바르게 잡았다면 텍스트가 사용자에게 보여지지 않는 약간의 사진을 희미 해 볼 수 있습니다.하지만이 접근법과 접근 방식은 방화 광명이나 다른 것을 통해 변경 될 수 있습니다. 텍스트가 사용자에게 보이기 때문에 다소 불안정합니다. 내가 고칠 생각하는 가장 좋은 방법은 아무도 원래 이미지를 볼 수 없도록 사진을 편집하고 오버레이를 maunally 추가하는 것입니다.

img { 
    width:367; 
    height:459px; 
    -webkit-filter: blur(3px); //change the value according to what suits the best 
    -moz-filter: blur(3px); //change the value according to what suits the best 
    -o-filter: blur(3px); //change the value according to what suits the best 
    -ms-filter: blur(3px); //change the value according to what suits the best 
    filter: blur(3px); //change the value according to what suits the best 
} 

Answer 2

<div class="front-coffee block"> 
    <img src='//image goes here' border='0' /> 
</div> 

// CSS이 도움이

.front-coffee { 
     //Your CSS here 
     background: rgba(0, 0, 0, 0.8); //If put against a lighter background, this will give a nice transition effect towards a lighter gray colour. This is absolutely not needed. But I suggest having at least 1 solid layer behind your opaque image. 
     } 
.front-coffee img { 
     opacity: 0.7; // This will ensure that all images will have an opacity set to 70% . 
     } 

희망.