Полупрозрачное градиентное изображение, чтобы затемнить без обесцвечивания - PullRequest
Новая
       20

Полупрозрачное градиентное изображение, чтобы затемнить без обесцвечивания

0 голосов
/ 24 февраля 2012

Я разрабатываю веб-сайт, который будет иметь несколько вложенных элементов div для бокового меню. Фон каждого div имеет более темный оттенок синего, чем фон div, который его окружает.

Я бы хотел, чтобы у каждого элемента div был эффект градиента на заднем плане, когда он переходит от слегка темного синего к цвету фона элемента div.

Я знаю, что CSS3 имеет встроенную поддержку градиентов, но старые браузеры не смогут их отображать, так что это не вариант. Вместо этого я создал фон PNG для каждого отдельного элемента.

Однако эта опция фона PNG не является сверхустойчивой. Если я решу, что хочу немного другой цвет в качестве фона, я должен создать новый PNG с этим новым цветом. Раздражает.

Я бы хотел использовать одно полупрозрачное изображение PNG от серого до прозрачного во ВСЕХ элементах div, чтобы я мог свободно менять цвета фона. Но проблема с использованием такого PNG заключается в том, что он как бы обесцвечивает и тускнеет, а не темнеет ...

Есть ли способ манипулировать таким PNG, чтобы затемнить все, что он перекрывает, БЕЗ десатурации ???

1 Ответ

2 голосов
/ 24 февраля 2012

Итак: 

your-element{
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  background-image:    -moz-linear-gradient(top, #444444, #999999);
  background-image:     -ms-linear-gradient(top, #444444, #999999);
  background-image:      -o-linear-gradient(top, #444444, #999999);
  background-image:         linear-gradient(to bottom, #444444, #999999);
}

и ваше правило для IE: 

your-element{
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490);
        zoom: 1;
}

Простой в использовании кросс-браузер, совместимый, скажем, с 99% браузеров.

...