이미지 위에 텍스트 (반투명 배경과) 쓰기

사이트 및 블로그 생성 다음, 종종 어두운 반투명 배경과 함께, 이미지를 통해 소위 오버레이로 작성된보고 매우 일반적입니다 효과. 여기 예제 :

이 문서에서는 CSS를 사용하여 우리가 이미지의 덮어쓰기를합니다.

할 첫 번째 일은 이렇게 HTML 구조를 만들 수 있습니다 :

 <div class="boximg">



  



 border="0" src="tramonto.jpg"/>을 <img



  



 <div class="boxtesto">



    



 <span class="testo"> 아름다운 일몰! </ span>을



  



 </ 사업부>







 </ 사업부>

당신이 볼 수 있듯이 나는 내 이미지를 위치하는 사이 DIV 컨테이너 (클래스와 함께 ". Boximg")와 차례로 당신이 적용할 텍스트를 표시 기간을 포함하는 새로운 사업부를 (클래스와 함께 ". Boxtesto")을 만들었 .

지금은 우리 CSS, 실질적으로, 작업 장소를 보자 :

 . Boximg {



  



 위치 : 상대적;



  



 폭 : 400px; / 이미지의 폭 * 동일 * /



  



 높이 : 300px; / * 같은 이미지 높이 * /







 }







 {div.boxtesto



  



 위치 : 절대;



  



 하단 : 0px;



  



 왼쪽 : 0px;



  



 폭 : 100 %;



  



 배경 : RGB (0, 0, 0);



  



 배경 : RGBA (0, 0, 0, 0.6);







 }







 {span.testo



  



 패딩 : 10px;



  



 색상 : # FFFFFF;



  



 글꼴 : 굵게 24px/45px Helvetica, 산세 - 세리 프;



  



 문자 간격 : - 1px;







 }

저장 상자 ( ". Boximg") 같은 크기와 수용하기위한 것일 뿐이므로 이러한 이미지에 상대적인 위치를하고 있습니다.
텍스트의 저장 상자 ( ". Boxtesto")는 우리 연구의 초점이 요소의 정상적인 흐름에서 제거하고 해당 컨테이너의 왼쪽 하단에 위치하고 분명 100 % 폭을 가지고 있습니다 절대 위치를 가지고있다 수평으로 전체 사용 가능한 공간을 가질 수 있습니다. 흥미 롭 군, 후, 어두운 배경을 정의하고 반투명으로 봉사 RGB와 RGBA를 사용하여 배경의 두 정의.
기간. "텍스트", 마지막으로 텍스트를 어떤 양식에 일치시키다 약간의 '패딩을 적용하는 유일한 목적을 가지고 있습니다.

• <<
• 1
• 2
• >>