Возможно ли сделать прозрачное изображение для фотошопа в CSS?

Question

Возможно ли сделать прозрачное изображение для фотошопа в CSS? Я попытался сохранить как jpg и gif с выбранной прозрачностью, но когда я накладываю его на css, он показывает цвет фона позади него, а не изображение, которое находится под ним. Я играл с z-index, и это не помогло.

Спасибо

Answer 1

Изображения JPEG не поддерживают прозрачность.
Вам необходимо сохранить изображение в формате PNG, который поддерживает прозрачность.

Если вам нужна поддержка IE6, вам также необходимо использовать filter proeprty .

Answer 2

Вам необходимо сохранить его в формате изображения, который поддерживает требуемый тип прозрачности. Формат JPEG вообще не поддерживает прозрачность.

Существует два типа прозрачности: индекс прозрачности и альфа-канал. Форматы GIF и PNG-8 поддерживают индекс прозрачности, т. Е. Один из 256 цветов выбран для представления прозрачности. Это означает, что каждый пиксель изображения может быть прозрачным на 100% или на 100% сплошным.

Формат PNG-24 поддерживает альфа-канал. Это значение прозрачности для каждого пикселя, поэтому оно может быть от 100% прозрачного до 100% твердого (на 256 уровнях).

Если ваше изображение имеет в основном полностью прозрачные или полностью сплошные пиксели, вы можете использовать индекс прозрачности, но если в нем много частично прозрачных пикселей, вы должны использовать альфа-канал.

Обратите внимание, что в старых версиях IE возникают проблемы с отображением прозрачности изображений PNG-24.

Answer 3

Во-первых, у вас должен быть прозрачный фон (как без фона) в качестве первого слоя вашего файла Photoshop. Убедитесь, что у него серые и белые квадраты на заднем плане, что означает, что он прозрачный. Когда вы будете готовы сохранить файл, перейдите в меню «Файл» и нажмите «Сохранить для Интернета». Выберите формат файла PNG и убедитесь, что у него установлен флажок «Прозрачность». Просто нажмите SAVE и дайте ему имя, и изображение в Photoshop будет сохранено в PNG-файле с прозрачным фоном, который отображает больше цветов, он меньше, чем GIF-файл и так же хорош, как JPG.

Answer 4

Я рекомендую использовать тип файла .gif; он поддерживает прозрачный фон и работает в большинстве случаев. .jpgs вообще не поддерживает прозрачные фоны. .pngs поддерживает красивые альфа-прозрачные фоны, но не в IE6. (Использование фильтра AlphaImageLoader может вызвать замедление страницы и сбой браузера .)

Прежде всего, убедитесь, что ваше изображение имеет прозрачный фон в Photoshop - часто это бело-серая шахматная доска. Затем выберите «Сохранить для Интернета» (или что-то похожее, оно варьируется в разных версиях) в меню «Файл», выберите любой пресет GIF, который лучше всего работает, и убедитесь, что установлен флажок «Прозрачность».

Answer 5

Вы должны сохранить его как файл .png, как уже упоминалось, но это сложно, когда дело доходит до IE6. Это зависит от того, использует ли изображение, которое вы используете, градиент, переходящий к прозрачности. Например, тень.

Если у вас есть изображение с тенью (или любым градиентом), лучше использовать .png, но теперь это будет работать для IE6, и вы должны следовать советам SLaks. По моему опыту, я остаюсь в стороне от подобных исправлений javascript и просто хочу сохранить изображение с нужным фоном.

Если у вас нет градиента, тогда .gif - это путь, который будет поддерживаться во всех браузерах.

Answer 6

Как указал SLaks, используйте для этого файл изображения PNG. JPEG не подойдет, я не уверен, почему GIF не будет работать ...

Я посмотрел на проект, который я делал с использованием некоторого полупрозрачного фона и его CSS, и вот что я нашел:

background-image: url(../images/translucent_white.png);

Так что это действительно так просто. Просто сохраните изображение с прозрачностью в формате PNG.