Как я могу использовать функции цвета SCSS для эмуляции прозрачного наложения белого цвета?

Question

Я пытаюсь использовать SCSS для подделки белого прозрачного цвета с наложением другого сплошного цвета.Я мог бы легко сделать background-color:rgba(255,255,255,.5) на оверлее <div>, но я бы предпочел решение, которое не требует, чтобы браузер поддерживал цвета rgba.Кроме того, так как я использую переменные SCSS, я не буду заранее знать, какой будет нижний цвет, поэтому мне нужно вычислить результат.

Кажется, что это один из цветов SCSSфункции должны быть в состоянии достичь этого эффекта, но я попробовал несколько вещей, и я не могу заставить его работать.

Кто-нибудь знает, как это сделать?

Вот демонстрация, чтобы лучше проиллюстрировать, что я пытаюсь сделать, или вы можете увидеть код, вставленный ниже.http://jsfiddle.net/BRKR3/

HTML

<div class="background">
    <div class="overlay rgba"></div>
</div>

<div class="background">
    <div class="overlay scss"></div>
</div>

SCSS

$background: #009966;

.background {
    background-color:$background;
    height:60px;
    margin:20px;
    padding:20px;
    width:60px;
}

.overlay {
   height:60px;
   width:60px;
}

.rgba {
    background-color:rgba(255,255,255,0.5);
}

/* works if $background is $808080, but not if it's a color */
.scss {
    background-color:scale-color($background, $lightness:150%);
}

ОБНОВЛЕНИЕ

Вот рабочий jsFiddle, используя ответ Чака: http://jsfiddle.net/BRKR3/3/

Answer 1

Легкость не смешивает цвет с белым; это делает его более светлым, что означает, что он светлее, но компоненты также более интенсивны (тогда как смешивание с белым делает их более приглушенными). Вы можете думать о легкости как об умножении цвета. Чтобы получить эффект экрана при регулировке яркости, необходимо пропорционально уменьшить насыщенность.

Чтобы получить желаемый эффект, просто используйте mix($background, white, 50%). Это выполняет тот же тип смешивания, что и комбинирование цветов с альфа-каналом.

Answer 2

Я не вижу, как изменение яркости было бы похоже на подделку белого прозрачного наложения.Кроме того, я не думаю, что вы можете достичь того, чего хотите, используя sass, так как вам нужно знать свой нижний цвет, чтобы дать верхнему цвету значение.

Если вы не можете использовать rgba и неЗнайте, какой у вас нижний цвет, вы можете использовать белый прозрачный 10x10px png в качестве фона.Если вам нужна поддержка IE6, используйте IE png fix или filters (не соответствует wac afaik).

.overlay {
    background: transparent url('transparent-white.png') repeat;
{

При этом, мое скромное мнение таково, чтомы должны оставить IE9 <позади, когда говорим об использовании rgba, просто слишком грязно, чтобы оказывать им поддержку, и обычно это не стоит. </p>

РЕДАКТИРОВАТЬ:

Вы используете свойство $lightness сзначение 150%, в то время как он принимает значения только от 0% до 100%.Если вы используете 0%, вы получите тот же цвет, а при использовании 100% вы получите белый.Если цвет фона сплошной, вы можете использовать, как вы сказали в своем вопросе, функцию scale_color следующим образом:

.scss {
    background-color:scale-color($background, $lightness:50%);
}

Это приведет к тому, что цвет вашего фона будет на 50% светлее.По сути, вы выполнили всю работу, но использовали 50% вместо 150%:)