Полупрозрачные картинки для фона – Как сделать полупрозрачный фон 🚩 фотошоп прозрачный фон 🚩 Компьютеры и ПО 🚩 Другое

Leave a Comment / Разное / By /

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

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

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

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

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

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

CSS свойство Opacity

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

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" media="all" type="text/css" href="css/style2.css" /> 
    </head>
      <body>
  <div>
   Тут будет много Вашего текста
  </div>
    </body>
</html>

CSS:

body {
    background: url(./vaden-pro-logo.png); /* Фон для тела страницы  */
   }
   . prozrachen {
    padding: 10px; /*Отступы для текста*/
    background: darkturquoise; /* Задаем цвет фона */
    margin: 0 auto; /* Центрируем блок */
    width: 50%; /* Задаем ширину блока */
 
    opacity: 0.7; /* Задаем прозрачность */
    font: 48px/64px Times New Roman;
    text-align: justify;
   }

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

метод opacity

Важно!!!

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

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

    • с абсолютным позиционированием (position: absolute)
    • с фиксированным линейным размером (height или width).
  3. Степень прозрачности наследуется дочерними элементами, при чем дочернему элементу можно увеличить прозрачность, но сделать меньше – нельзя. Т. е. на полупрозрачном фоне НЕ ПРОЗРАЧНОГО текста не сделать.

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

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

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

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

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

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

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

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

  2. Используем ее в качестве бэкграунда:
    body {
     background: url(./vaden-pro-logo.png); 
     }
    .prozrachen {
     padding: 10px; 
     background: url(./transparent.png);
     margin: 0 auto; 
     width: 50%; 
     font: 48px/64px Times New Roman;
    color: white;</li>
    text-align: justify;
   }

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

Метод PNG

Важно!!!

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

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

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

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

background: rgba(r, g, b, a);

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

body {
    background: url(./vaden-pro-logo.png); /* Фоновый рисунок  */
   }
   .prozrachen {
    padding: 10px; 
    background: rgba(0, 206, 209, 0.7); 
    margin: 0 auto; 
    width: 50%; 
    font: 48px/64px Times New Roman;
    color: white;
    text-align: justify;
   }

метод rgba

Важно!!!

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

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

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

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

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

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

Важно!!!

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

Подытожим?

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

  • Под прозрачным блоком должна находиться яркая не однообразная картинка. На однотонном фоне изюминка прозрачности теряется.
  • При выборе конкретного практического подхода, ориентируйтесь на то, какими браузерами пользуется ваша целевая аудитория. Кросс-браузерность – вещь важная.

Успехов!!!

Оценок: 7 (средняя 5 из 5)

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

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

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

Иногда пользователю может понадобиться изображение в формате PNG с прозрачным фоном. Однако не всегда необходимый файл соответствует требуемым параметрам. В таком случае его нужно самостоятельно изменять или подбирать новый. Что касается создания прозрачного фона, осуществить эту задачу помогут специальные онлайн-сервисы.

Создаем прозрачный фон для картинки онлайн

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

Читайте также: Создание прозрачного изображения онлайн

Способ 1: LunaPic

Графический редактор LunaPic работает в режиме онлайн и предоставляет пользователю большое количество самых разнообразных инструментов и функций, включая замену фона. Выполняется поставленная цель следующим образом:

Перейти на сайт LunaPic

  1. Запустите главную страницу интернет-ресурса LunaPic и переходите в обозреватель для выбора рисунка.

    2. Перейти к добавлению изображения на сайте LunaPic

  2. Выделите картинку и нажмите на «Открыть».

    3. Выбрать изображение для сайта LunaPic

  3. Вы будете автоматически перенаправлены в редактор. Здесь во вкладке «Edit» следует выбрать пункт «Transparent Background».

    4. Выбрать действие на сайте LunaPic

  4. Нажмите на любом месте с подходящим цветом, который следует вырезать.

    5. Выбрать фон на сайте LunaPic

  5. Произойдет автоматическое очищение рисунка от заднего плана.

    6. Результат удаления фона на сайте LunaPic

  6. Кроме этого вы можете еще раз корректировать удаление фона, увеличив его действие с помощью перемещения ползунка. По завершении настроек кликните на «Apply».

    7. Редактировать параметры удаления фона LunaPic

  7. Через несколько секунд вы получите результат.

    8. Готовый результат удаления фона на сайте LunaPic

  8. Можете сразу же переходить к сохранению.

    9. Сохранить изображение на сайте LunaPic

  9. Оно будет загружено на ПК в формате PNG.

    10. Открыть изображение скачанное с сайта LunaPic

На этом работа с сервисом LunaPic завершена. Благодаря приведенной инструкции вы сможете без проблем сделать фон прозрачным. Единственным недостатком сервиса является его корректная работа только с теми рисунками, где задний план заполняет преимущественно один цвет.

Способ 2: PhotoScissors

Давайте разберемся с сайтом PhotoScissors. Здесь нет такой проблемы, что хорошая обработка будет получена только с определенными картинками, поскольку вы сами задаете область, которая вырезается. Осуществляется процесс обработки так:

Перейти на сайт PhotoScissors

  1. Находясь на главной странице онлайн-сервиса PhotoScissors, переходите к добавлению необходимой фотографии.

    2. Перейти к работе на сайте PhotoScissors

  2. В обозревателе выделите объект и откройте его.

    3. Открыть изображение для сайта PhotoScissors

  3. Ознакомьтесь с инструкцией по использованию и приступайте к редактированию.

    4. Инструкции на сайте PhotoScissors

  4. Левой кнопкой мыши активируйте зеленый значок в виде плюса и выделите им область, на которой располагается основной объект.

  5. Красным маркером потребуется выделить область, которая будет удалена и заменена на прозрачность

    6. Выделить область для удаления на сайте PhotoScissors

  6. В окне предпросмотра справа вы сразу будете наблюдать изменения вашего редактирования.

    7. Предпросмотр на сайте PhotoScissors

  7. С помощью специальных инструментов вы можете отменять действия или использовать ластик.

    8. Элементы редактирования на сайте PhotoScissors

  8. Переместитесь во вторую вкладку на панели справа.

    9. Вкладка настройки фона на сайте PhotoScissors

  9. Здесь вы можете выбрать тип фона. Убедитесь в том, что активирован прозрачный.

    10. Выбрать тип фона на сайте PhotoScissors

  10. Приступайте к сохранению изображения.

    11. Перейти к скачиванию на сайте PhotoScissors

  11. Объект будет скачана на компьютер в формате PNG.

    12. Открыть изображение на сайте PhotoScissors

На этом работа с онлайн-ресурсом PhotoScissors завершена. Как видите, в управлении им нет ничего сложного, с поставленной задачей разберется даже неопытный пользователь, не обладающий дополнительными знаниями и навыками.

Способ 3: Remove.bg

Последнее время сайт Remove.bg находится на слуху у многих. Дело в том, что разработчики предоставляют уникальный алгоритм, который автоматически вырезает фон, оставляя на изображении только человека. К сожалению, на этом возможности веб-сервиса заканчиваются, однако с обработкой таких фотографий он справляется великолепно. Предлагаем детальнее ознакомиться с этим процессом:

Перейти на сайт Remove.bg

  1. Перейдите на главную страницу Remove.bg и приступайте к загрузке картинки.

    2. Перейти к работе на сайте Remove.bg

  2. В случае если вы указали вариант загрузки с компьютера, выберите снимок и кликните на «Открыть».

    3. Открыть изображение Remove.bg

  3. Обработка будет произведена автоматически, и вы сразу можете скачать готовый результат в формат PNG.

    4. Скачать результат на сайте Remove.bg

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

Читайте также:
Создание прозрачного фона в Paint.NET
Создание прозрачного фона в программе GIMP

Скачать результат на сайте Remove.bgМы рады, что смогли помочь Вам в решении проблемы.
Скачать результат на сайте Remove.bgОпишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

ДА НЕТ

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

Приветствую Вас, дорогие читатели моего блога!

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

Но фон с картинки надо было как то убрать, я начала бороздить просторы интернета, в поисках решения своей задачи. Вариантов очень много на самом деле, но я искала, что нибудь  полегче)). Я нашла очень легкий и простой способ, как можно убрать фон с картинки.

И конечно же я сразу спешу поделиться с Вами. Что бы Вам не пришлось  так же как и мне, тратить массу времени на поиски.

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

Покажу Вам на примере, вот такой картинки, убирать мы будем белый фон

Заходим в онлайн фотошоп. Я использовала вот этот PIXLR

Выбираем : Загрузить изображение с компьютера.

Далее выбираем рисунок, который нам нужен, нажимаем открыть

 

Теперь справа в окошке «СЛОИ» надо открыть замочек

 

Кликаем на него 2 раза левой кнопкой мыши, должна появиться галочка в квадратике.

 

Теперь идем на панели, которая находиться слева, выбираем инструмент «волшебная палочка» и толерантность ставим 21.

 

Далее кликаем по белому фону, у нас выделяется рисунок

 

Теперь выбираем: «редактировать» далее «очистить»

 

Вот вроде бы и все, но меня не устраивает полностью картинка, остались еще остатки фона, я снова кликаю на то место которое хочу убрать. Потом «редактировать»—-«очистить». И так пока не уберете все, что надо.

После того, как мы удалили фон, надо сохранит нашу картинку. Для этого нажимаем вкладку «файл»——«сохранить»

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

Все, нажимаем «да» и наша картинка с прозрачным фоном готова! Вот так легко и просто можно убрать фон с картинки. Я буду Вам очень благодарна если Вы нажмете на кнопочки  соц, сетей и поделитесь со своими  друзьями.

А так же оставляйте свои комментарии, мне интересно узнать Ваше мнение, полезна ли оказалась Вам моя статья.

Понравилось? Не жадничай, поделись с друзьями. Нажми на любимую соц. сеть.

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

  • Clips

    Монтаж видео на мобильном устройстве

    • Назад
    • Clips