Как сделать прозрачный фон кнопки css

Как убрать фон у кнопки?

Сделал кнопку с изображением , но появилась белая обводка. Как её убрать?

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Способы создания прозрачных фонов

Вы хотите научиться создавать страницы с оригинальным и ярким современным дизайном? Применение полупрозрачных элементов способно помочь Вам в решении этой непростой задачи. Сегодня мы рассмотрим основные практические способы задания прозрачности структурных элементов.

Как сделать блок прозрачным

Как задать прозрачность?

Если рассматривать данную тему сквозь призму исторического развития веб-технологий, то можно выделить следующие подходы:

  • Свойство opacity.
  • Использование PNG -картинки
  • Формат системы RGBA
  • Ну, и наконец, древность или клетчатые изображения.

CSS свойство Opacity

Применение стилевого CSS свойства оpacity позволяет задать прозрачность того элемента, к которому применяется. Значения, которые можно использовать в качестве аргумента изменяются в пределах от 0 до 1.
Рассмотрим пример.

В результате мы получили полупрозрачный блок:

метод opacity

  1. Opacity принимает значения из диапазона: 0 (полная прозрачность) – 1 (непрозрачность).
  2. Кросс-браузерность. В IE до седьмой версии включительно Opacity не поддерживается. Добиться одинакового отображения элемента поможет следующая строчка:

Стоит принимать во внимание то, что свойство filter отсутствует в html спецификациях, изменяет значения от 1 до 100 и может применяться только к элементам:

  • с абсолютным позиционированием (position: absolute)
  • с фиксированным линейным размером (height или width).

Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет

и рассмотрим его под микроскопом:

прозрачность блока

Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.

Использование PNG -картинки

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

    Создаем в Photoshop, однотонную полупрозрачную картинку (назовем ее transparent) и сохраняем в формате png.

Метод png картинки

В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:

Метод PNG

  1. В отличии от свойства opacity прозрачность задается только для фона
  2. Кросс-браузерность. Работает почти во всех браузерах, и это плюс. Но прозрачность PNG не поддерживается в IE6. Если вы оптимизируете свой сайт под такую древность – придется применять другие методы или скрипты.
  3. При отключении отображения картинок, ваш фон пропадет (учтите этот момент при оптимизации отображения на мобильных устройствах, ведь безлимитный интернет не всегда есть под рукою).
  4. Для изменения цвета и/или степени прозрачности вам нужно создать новую картинку и перезалить ее на серв.

Формат системы RGBA

Одним из самых современных методов изменения транспарантности фона является применение системы RGBA.

RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha-канала, характеризующего степень прозрачности.

В уже известном нам примере, заменим содержимое в CSS файле на следующее:

метод rgba

  1. В отличии от свойства opacity прозрачность задается только фону
  2. В отличии от метода PNG картинки, для изменения цвета или степени транспарентности нам нужно просто поменять значения rgba.
  3. Кросс-браузерность. Работает во всех современных браузерах (начиная с IE9, Op10, Fx3,Sf3.2).Для более старых браузеров придется либо пожертвовать прозрачностью, либо применять opacity, png методы.

Клетчатые изображения, или с уважением к истории

Этот метод стоял у истоков веб-дизайна, и видел старые-старые браузеры, которые ничего толком не умели. Он заключается в создании клетчатого фона, в котором цветные квадратики чередовались с прозрачными.

Метод клетчатой картинки

В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.

Клетчатый фон

  1. При просмотре текста на таком фоне могут быстро уставать глаза (особенно давит рябь при прокрутке).
  2. В остальном особенности применения аналогичны с методом «PNG -картинки».

Подытожим?

Напоследок, несколько общих рекомендаций по использованию прозрачности в своих проектах:

Как сделать прозрачную кнопку HTML?

Я использую dreamweaver для создания веб-сайта, и я думал просто использовать Photoshop для создания фона. Я решил сделать это только потому, что в случае, если бы я решил легко изменить название кнопки, просто отредактировав коды, я мог бы просто ссылаться на код. Если бы я строил кнопки с помощью Photoshop, я не смог бы легко редактировать тексты в этих кнопках или в любом элементе.

поэтому мой вопрос прост, как создать кнопку, которая имеет простой встроенный стиль прозрачный, оставляя значение кнопки по-прежнему видимым.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *