부모로부터 색상을 상속 받아 CSS에서 색상 음영 처리

CSS 클래스에서 정의한 활성 색상을 사용하고 다른 CSS 클래스에서 사용되는 색상을 어둡게하거나 밝게하는 방법이 있습니까?부모로부터 색상을 상속 받아 CSS에서 색상 음영 처리

개발 시나리오 :
우리는 회색의 음영으로 색상을 정의하는 CSS 스타일을 사용하는 대화 상자가 있습니다. dailog에는 Button up과 Button down states를 시뮬레이트하는 두 가지 CSS 스타일을 사용하는 버튼이 있습니다.

대화 상자 색상을 사용하지만 단추 모양이 어둡거나 밝게 표시되도록 단추의 CSS 스타일을 지정할 수 있습니까? 버튼면은 기본 대화 상자 색상보다 더 밝아야하고 3D 버튼 프레임의 모습을 나타내는 테두리에는 더 밝고 어두운 색상을 사용해야합니다.

목표 :
우리는 대화 상자의 색상을 변경하는 경우, 버튼도 버튼의 상하 상태를 렌더링하는 데 사용되는 2 CSS 스타일에 코드를 변경하지 않고도 변경합니다.

JavaScript에서이 작업을 수행하는 방법이 있다고 생각하지만 CSS에서이 작업을 수행 할 수있는 방법이 있습니까?

출처

2009-11-13 cbuck12000

방정식, 함수 등이 없으므로 색상을 변경하기위한 순수한 CSS 방법이 없습니다. , 또는 변수. 저스틴에 불투명도가 있는지 보는 것은 흥미로울 것입니다. – davethegr8

밝게하려는 양에 맞는 opacity의 흰색 또는 검은 색 배경을 사용할 수 있습니다. 불투명도는 브라우저 관련 해킹이 필요하기 때문에 조금 더 사용하기 쉽습니다 (다른 일반적인 CSS 속성과 비교하여). 내가 another stackoverflow question related to Opacity 대답 BTW

.show-50 { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50; zoom:1; }

, 그리고 브라우저에서 투명도를 적용하는 데 사용할 수있는 몇 가지 jQuery 코드 샘플을 포함 this blog post에 따르면, 다음 (해키) CSS는 50 %의 불투명도를 지원하는 브라우저에서 작동합니다 중립. 위의 CSS가 당신을 개그로 만드는 경우 대신 그 것을 사용할 수 있습니다. :-) 요소에 "불투명도를 적용하기위한 IE 별 전제 조건"인 "레이아웃"이 있는지 확인하려면 위의 "확대/축소 : 1"을 추가하십시오.이 문제는 위에 링크 된이 스레드에서도 설명됩니다.

흰색이지만 선호하는 투명도 값을 가진 PNG 이미지를 사용할 수도 있습니다. IE6에서는 일반적인 PNG-fix 솔루션이 필요합니다.

IE8에

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <style type="text/css"> 
     .button { background-color:green; height:30px; width:100px; border: solid 1px red; color:#FFF; margin:20px; text-align:center; } 
     .buttonText { height:30px; width:100px; color:#FFF; margin:20px; text-align:center; } 
     .show-50 { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50; zoom:1; } 
     .lighter { background-color:#CCCCCC; height:100%; width:100%; } 
     .darker { background-color:#000000; height:100%; width:100%;} 
     .whitetext {color:#fff; height:100%; width:100%; padding-top:6px;} 
     .moveText {margin-top:-52px; color:#fff; padding-top:6px; z-index: 10; } 
    </style> 
</head> 
<body> 
<div class="button"></div> 
<div class="buttonText moveText">Regular button</div> 
<div class="button"><div class="show-50 lighter"></div></div> 
<div class="buttonText moveText">Lighter button</div> 
<div class="button"><div class="show-50 darker"></div></div> 
<div class="buttonText moveText">Darker button</div> 
</body> 
</html>

, 텍스트가 보이는 완벽한 (일명 흰색) :

여기에 무엇이 가능한지를 보여주는 코드 샘플 (일부 제한)입니다. FF와 Safari에서이 텍스트는 불행히도 어두워졌습니다. 위의 해킹을 통해 다른 DIV 속임수로 된 텍스트를 다른 색의 배경 위에 흰색 텍스트를 표시하는 속임수로 만들었지 만 동일한 속임수는 FF와 Safari에서 작동하지 않았습니다. 창의력을 발휘하고이를 개선 할 수있는 방법을 찾을 수있어 모든 브라우저에서 텍스트가 동일한 색상으로 유지 될 것으로 판단됩니다. 실제 구현은 아마도 부정적인 톱 마진 (top-margin) 해킹이 아닌 절대 위치 지정 (absolute positioning)을 사용하기를 원할 것입니다.

출처

2009-11-13 18:31:02

LESS을 사용 해본 적이 있습니까? 그러나,

@nice-blue: #5B83AD; 
@light-blue: @nice-blue + #111; 

#header { color: @light-blue; }

LESS 배포 동안 전처리를 필요로하지 않습니다 - 그래서 당신은 런타임에 위의 작업을 수행해야하는 경우,이 옵션이 될 수 없습니다 (하지만 자바 스크립트는 실행 가능한 유일한 것 : 그것은 많은 다른 것들 사이에 변수를 지원합니다 옵션, 어쨌든).

출처

2009-11-13 18:39:00 ChssPly76

와우, 덜 멋져 보입니다. 나는 이번 주말에 PHP로 이식하는 데 찌를 것이다. – eyelidlessness

@eyelidlessness - 끝났습니다 :-) http://leafo.net/lessphp/docs/ – ChssPly76

감사합니다 ChssPly76! – eyelidlessness

PHP로 동적 CSS 파일을 만들고 색상의 밝기를 자동으로 계산하는 기능이 있습니다. 1 필드 만 변경하여 여러 곳에서 정의 된 색상을 변경하는 설정을 할 수 있습니다. 다음은 예입니다.

<?php 
//adjust brightness by taking a value between -255 and 255 
function brightness($color, $brightness){ 
    if(!$color) return false; 
    $c = trim($color); 
    $c = str_replace('#','', $c); 
    $l = strlen($c) == 3 ? 1 : (strlen($c) == 6 ? 2 : false); 

    if($l){ 
    $rgb[0] = hexdec(substr($c, 0,1*$l)) + $brightness; 
    $rgb[1] = hexdec(substr($c, 1*$l,1*$l)) + $brightness; 
    $rgb[2] = hexdec(substr($c, 2*$l,1*$l)) + $brightness; 



    }else{ 
     return false; 
    } 

    $out = '#'; 
    for($i = 0; $i<3; $i++) 
     $rgb[$i] = dechex(($rgb[$i] <= 0)?0:(($rgb[$i] >= 255)?255:$rgb[$i])); 

    for($i = 0; $i<3; $i++) 
     $out .= ((strlen($rgb[$i]) < 2)?'0':'').$rgb[$i]; 

    return $out; 
} 

// Color Setup 
$myColor = "#3399CC"; 
$myLighterColor = brightness($myColor, "50"); 
$myDarkerColor = brightness($myColor, "-50"); 


// Include this if using a seperate style sheet 
// header("Content-Type: text/css"); 
?> 
<style type="text/css"> 
    body { 
    background-color:<?=$myLighterColor;?>; 
    } 

    #div1 { 
    background-color:<?=$myColor;?>; 
    border: 1px solid <?=$myDarkerColor?>; 
    } 
</style>

출처

2009-11-13 23:15:15

CSS 응답은 불가능합니다. 그러나 사전 처리가 필요한 SASS http://sass-lang.com을 사용할 수도 있습니다.

출처

2012-11-14 12:38:20

또는 단순히 배경 이미지 만 사용할 수 있습니다. 하나의 검정색 (하나의 픽셀 이미지로 충분 함)으로 불투명도를 20으로 설정하고 하나의 흰색도 약 20으로 설정합니다.

출처

2014-10-04 01:41:20 Nisse

부모로부터 색상을 상속 받아 CSS에서 색상 음영 처리

답변

관련 문제