불투명도가 85 인 빨강 bg + 검정색 필드 = 핑크색 텍스트

<style> 
* { 
    background: red; 
} 
.blackbalk{ 
    background:black; 
    ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; 
    filter:alpha(opacity=85); 
    -khtml-opacity:.85; 
    -moz-opacity:.85; 
    opacity:.85; 
    width: 985px; 
    margin: 0 auto; 
    height:255px; 
    color: white; 
} 
</style> 
<div class="blackbalk">Text </div>

이제 텍스트가 분홍색으로 표시됩니다. 왜 그런가? 어떻게 다시 흰색으로 가져올 수 있습니까?불투명도가 85 인 빨강 bg + 검정색 필드 = 핑크색 텍스트

인사말

편집 : JS 바이올린은 명확하게하기 : http://jsfiddle.net/WFxbH/

출처

2011-03-01 Thew

당신은 대신 요소상의 rgba 배경을 사용하여 작업을 수행 할 수 있습니다 Live Demo -이 작업은 "in every browser you care about"이고 내 jsFiddle은 해당 브라우저에서도 작동하도록 권장 된 IE conditional comment을 포함합니다.

.blackbalk { 
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0); 
    /* RGBa with 0.6 opacity */ 
    background: rgba(0, 0, 0, 0.85); 
    /* For IE 5.5 - 7*/ 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000); 
    /* For IE 8*/ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000)"; 
}

출처

2011-03-01 21:37:01 thirtydot

편집 : 캔트 이상 불투명도의 계단식를 타고있다. 내 피니언에서 가장 좋은 대안은 배경 이미지로 단일 픽셀 85 % 불투명 검정 PNG를 사용하는 것입니다. 옵션 2는 내부 콘텐츠를 div 외부에 실제로 배치 한 다음 위치를 지정하는 것이지만 훨씬 더 까다 롭습니다. 투명 png가 IE에서 많은 문제없이 작동하도록 할 수도 있습니다.

IGNORE : 현재 테스트 할 수 없으므로 양성이 아닙니다.하지만 텍스트가 불투명도 변경으로 반투명 상태가되었다고 가정합니다. 아마도 background-color : none 및 color : white; 그것을 해결할 수도 있습니다. 재정의하려면 불투명도를 100 %로 설정해야 할 수도 있습니다.

출처

2011-03-01 21:17:39 lupos

아, 원래 의도와 오해했습니다. 그래도 텍스트가 내포 된 불투명도 변수가 문제를 해결할 수도 있습니다. – lupos

thirtydots의 대답은 실제로 멋지게 보입니다. 방금 새로운 것을 배웠습니다. – lupos

불투명도는 배경색뿐만 아니라 전체 요소와 그 내용에 영향을줍니다. 당신은 단지 85 % 검은 색으로 배경색을 원하는 경우에, 당신은과 같이, RGBA 컬러와 함께에서 지정할한다 :

.blackbalk { 
    background: rgba(0, 0, 0, 0.85); 
    width: 985px; 
    margin: 0 auto; 
    height: 255px; 
    color: white; 
}

출처

2011-03-01 21:35:29

불투명도가 85 인 빨강 bg + 검정색 필드 = 핑크색 텍스트

답변

관련 문제