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

Question

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

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

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

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

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

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

Answer 1

Там вы идете:

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; 
} 

Easy-Peasy кросс-браузер, совместимый для сказать, 99% ваших браузеров.