Прозрачное фоновое изображение с градиентом

Сегодня я разрабатывал прозрачный 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 будет поддерживать динамическую высоту - иногда очень короткий, иногда очень высокий. Я знаю, что этот градиент не важен, но я подумал, что стоило бы спросить, что вы думали.

Возможно ли иметь фоновое изображение, сохраняя остальную часть фона как градиент?

Ответы

Ответ 1

Имейте в виду, что градиент CSS на самом деле является значением изображения, а не значением цвета, которое может ожидаться некоторым. Поэтому оно соответствует background-image в частности, а не background-color или всей сокращенной строке background.

По существу, то, что вы действительно пытаетесь сделать, это расслоение двух фоновых изображений: растровое изображение над градиентом. Для этого вы указываете оба из них в одном объявлении, разделяя их запятой. Сначала укажите изображение, а затем градиент. Если вы укажете цвет фона, этот цвет будет всегда окрашиваться под самым нижним изображением, что означает, что градиент будет очень хорошо покрывать его, и он будет работать даже в случае резервного копирования.

Поскольку вы включаете префиксы поставщиков, вам нужно сделать это один раз для каждого префикса, один раз для префикса и один раз для резервного копирования (без градиента). Чтобы избежать повторения других значений, используйте свойства longhand 1 вместо сокращения background:

#mydiv .isawesome { 
    background-color: #B1B8BD;
    background-position: 0 0;
    background-repeat: no-repeat;

    /* Fallback */
    background-image: url('../images/sidebar_angle.png');

    /* CSS gradients */
    background-image: url('../images/sidebar_angle.png'), 
                      -moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
    background-image: url('../images/sidebar_angle.png'), 
                      -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ADB2B6), color-stop(100%, #ABAEB3));
    background-image: url('../images/sidebar_angle.png'), 
                      linear-gradient(to bottom, #ADB2B6, #ABAEB3);

    /* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ADB2B6', endColorstr='#ABAEB3', GradientType=0);
}

К сожалению, это не работает корректно в IE, поскольку он использует filter для градиента, который всегда окрашивает фон поверх.

Чтобы обойти проблему IE, вы можете поместить filter и фоновое изображение в отдельные элементы. Тем не менее, это избавит вас от возможности использования нескольких фонов CSS3, поскольку вы можете просто выполнять слоирование для всех браузеров, но это компромисс, который вам нужно будет сделать. Если вам не нужно поддерживать версии IE, которые не реализуют стандартизованные градиенты CSS, вам не о чем беспокоиться.

1 Технически декларации background-position и background-repeat применяются к обоим слоям здесь, потому что пробелы заполняются, повторяя значения вместо зажима, но так как background-position его начальное значение и background-repeat не имеет значения для градиента, охватывающего весь элемент, это не имеет большого значения. Подробные сведения о том, как обрабатываются многоуровневые описания фона, можно найти здесь.

Ответ 2

Порядок изображения и градиента здесь очень КЛЮЧ, я хочу сделать это понятным. Комбинация градиент/изображение работает лучше всего...

background: -webkit-gradient(linear, top, rgba(0,0,0,0.5), rgba(200,20,200,0.5)), url('../images/plus.png');

background-image также будет работать...

background-image: -webkit-gradient(linear, top, rgba(0,0,0,0.5), rgba(200,20,200,0.5)), url('../images/plus.png');

градиент должен на первом месте... идти вверх. Абсолютный ключ здесь заключается в том, что градиент использует цвет не менее 1 RGBA... цвет должен быть прозрачным, чтобы изображение прошло. (rgba(20,20,20,***0.5***)). ставя градиент сначала в вас, CSS помещает градиент поверх изображения, так что чем ниже значение альфа на RGBAs, тем больше вы видите изображение.

Теперь, если вы используете обратный порядок, PNG должен иметь прозрачные свойства, как и градиент, чтобы пропускать градиент. Изображение будет сверху, поэтому ваш PNG должен быть сохранен как 24-битный в Photoshop с альфа-областями... или 32-битный фейерверк с альфа-областями (или gif, я думаю... barf), так что вы можете увидеть градиент внизу. В этом случае градиент может использовать HEX RGB или RGBA.

Ключевым отличием здесь является внешний вид. Изображение будет намного более ярким, когда сверху. Когда у вас есть возможность настраивать значения RGBA в браузере, чтобы получить желаемый эффект... вместо редактирования и сохранения взад и вперед от вашего программного обеспечения для редактирования изображений.

Надеюсь, это поможет, извините меня за упрощение.

Ответ 3

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

background: linear-gradient(to right, rgba(255,255,255,0) 20%,
              rgba(255,255,255,1)), url(http://foo.com/image.jpg);

введите описание изображения здесь

Ответ 4

Это возможно с использованием нескольких фоновых синтаксисов:

.example3 {
    background-image: url(../images/plus.png), -moz-linear-gradient(top,  #cbe3ba,  #a6cc8b);
    background-image: url(../images/plus.png), -webkit-gradient(linear, left top, left bottom, from(#cbe3ba), to(#a6cc8b));
}

Я читал об этом в Здесь одно решение.

Ответ 5

Прозрачные изображения еще не являются стандартом CSS, но они поддерживаются большинством современных браузеров. Однако это часть рекомендации W3C CSS3. Реализация варьируется от одного клиента к другому, поэтому вам придется использовать более одного синтаксиса для совместимости с несколькими браузерами.

http://www.handycss.com/effects/transparent-image-in-css/