다른 이미지 배경에서 텍스트를 읽을 수없는 경우

다음을 개선 할 수있는 방법에 대한 약간의 디자인 도움말이나 조언을 찾고 있습니다.

제목에서 알 수 있듯이 여러 이미지가 다른 이미지에 배경으로 표시되는 웹 사이트 배너가 있습니다. 이제 대부분의 이미지가 어둡기 때문에 글꼴 색상을 흰색으로 설정했습니다. 그러나 그럼에도 불구하고 일부 텍스트는 다음과 같은 몇 가지 이미지에서 읽을 수 없습니다.

CSS로 작업하고 있으므로 다음과 같은 다른 옵션을 시도했습니다.

텍스트 그림자 추가하기 :

CSS :

text-shadow: 3px 3px 0px #000;

텍스트 주위에 반투명 상자를 만들어 보았습니다.

데모

상자 하나가 제자리에없는 것처럼 느껴집니다.

CSS를 아는 사람을 위해 바이올린 을 만들었습니다 . 그렇지 않다면, 당신의 상상력만으로 저에게 조언을 주시기 바랍니다.

추신 : 다른 글꼴을 사용하는 것이 더 나은 방법으로 도움이된다면 조언을 할 수도 있습니다.

이미 훌륭한 답변의 대안으로 텍스트 뒤에 50 %의 불투명도를 가진 검은 div를 추가하는 것은 어떻습니까?

이것은 글꼴이 기본적으로 모든 이미지에서 작동하도록 허용합니다.

div {
    position:absolute;
    top:250px;
    left:140px;
    width:500px;
    height:50px;
    background-color:black;
    z-index:0;
    opacity:0.5;
}

예

글꼴을 굵게 표시하고 (글꼴 자체가 아니라 무게 만 변경) 글자의 모든 가장자리를 정의하도록 그림자를 다시 지정하는 것이 좋습니다.

font-family: Raleway;
font-weight:900;
text-shadow: 0px 0px 3px #000;

당신은 결합 할 수 있습니다 하나 이상의 텍스트 그림자를 흐리게뿐만 아니라 명확한 윤곽을 만들 수 :

text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000;

검은 색 투명 배경과 약간의 패딩을 제공하십시오.

배경색 : rgba (0,0,0,0.5);

패딩 : 0.5em;

그 숫자로 조금만 연주하면 유용한 결과를 얻을 수 있습니다.