CSS - 불투명도가 낮은 div의 불투명 한 텍스트?

Question

div 뒤에 배경 이미지의 일부를 표시하기 위해 불투명도가 60 % 인 div가 있습니다. 불투명도는 60 %이므로 div의 텍스트는 회색으로 표시됩니다.

어쨌든이 수준을 무시하고 텍스트를 검정색으로 보이게 할 수 있습니까?

감사의 말.

감사합니다.

Answer 1

요소가 아닌 배경에 불투명도를 설정하십시오.

background-color: rgba(255,0,0,0.6); 

이전에 나는 achieve this in a backwards compatible way에 대해 썼습니다.

Answer 2

불투명도는 전체 div와 모든 자식에 적용됩니다. 불행히도, 그 불투명도를 취소 할 수는 없지만 더 많이 추가 할 수는 있습니다. 게다가 CSS가 요소 내부의 텍스트를 선택할 수있는 방법이 없습니다.

가장 좋은 해결책은 div 블록에 투명한 배경 이미지 (PNG 사용)를 적용하는 것입니다 (예 : 불투명도 60 %의 흰색 픽셀 이미지 1 개).

다른 해결책은 this tutorial by Steven York에 설명 된 것과 같이 다른 상자와 위치 지정을 사용하는 것입니다.

Answer 3

이 단지에 대한 모든 질문의 답한다 : http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

Answer 4

가장 간단한 해결 방법은 올바른 색상과 반투명 PNG를 생성하고 사용하는 것이 그 배경 이미지로.

레이아웃에 따라 다른 해결책은 텍스트를 별도의 레이어에 배치하고 반투명 부분의 위쪽에 텍스트를 배치하는 것입니다. 이런 식으로 뭔가가 작동합니다 :

<div style="position: relative; background-image: url('your_image.jpg')"> 
    <div style="opacity: 0.5; background-color: #fff; position: absolute"></div> 
    <div style="position: absolute">The text to go on top</div> 
</div> 

당신은 적절하게 자신의 위치/크기합니다 ( top, left, width 및 height 속성)를 추가해야 할 것

.

Answer 5

저는 과거 내 웹 사이트에서 이것을 실험했습니다. 원하는 것을 얻기위한 가장 쉬운 방법은 불투명도가 100 % 미만 (즉, 부분적으로 투명)으로 설정된 단일 픽셀 .PNG 이미지를 만들어이를 배경 이미지로 사용하는 것입니다. 기본적으로 CSS는 모든 요소를 ​​채 웁니다. CSS background-repeat 속성이 'repeat'로 설정되어 있는지 확인하십시오.

이렇게하면 포함 요소 자체에 투명도를 설정할 필요가 없으므로 텍스트의 불투명도가 영향을받지 않습니다.

놀랍게도 반투명 단일 픽셀을 만들기위한 도구가 있습니다 .PNG here.