Сегодня я разрабатывал прозрачный PNG-фон, который будет сидеть только в левом верхнем углу div, а остальная часть div будет поддерживать градиентный фон для всех прозрачных областей PNG и остальной части самого div.
Может быть, лучше объяснить с помощью кода, который, как я думал, может работать:
#mydiv .isawesome {
/* Basic color for old browsers, and a small image that sits in the top left corner of the div */
background: #B1B8BD url('../images/sidebar_angle.png') 0 0 no-repeat;
/* The gradient I would like to have applied to the whole div, behind the PNG mentioned above */
background: -moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ADB2B6), color-stop(100%,#ABAEB3));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ADB2B6', endColorstr='#ABAEB3',GradientType=0 );
}
То, что я обнаружил, - это то, что большинство браузеров выбирают один или другой - большинство выбирает градиент с его дальнейшего использования в файле CSS.
Я знаю, что некоторые из парней вокруг здесь скажут: "Просто примените градиент к PNG, который вы делаете", но это не идеально, потому что div будет поддерживать динамическую высоту - иногда очень короткий, иногда очень высокий. Я знаю, что этот градиент не важен, но я подумал, что стоило бы спросить, что вы думали.
Возможно ли иметь фоновое изображение, сохраняя остальную часть фона как градиент?