Наложение друг на друга изображения и формы (маска, слои)

@hebep · Регистрация: 27.07.2016

Author24 — интернет-сервис помощи студентам

Всем доброго вечера. Есть изображение-текстура и есть изображение-форма нужно наложить их друг на дурга так чтоб как к примеру в фотошопе маску т.е какая-то часть рисунка видна текстура а какая-то прозрачна и скрыта. Есть ли такая возможность в CSS, HTML5 или JavaScript?

@Padimanskas · 31.07.2016, 20:05

Наверное вам нужно маскирование(обтравочная маска) и отсечение. Это делается с помощью свойства css clip-path и svg.

HTML5

<img src="http://images.psxextreme.com/wallpapers/ps3/peace_1209.jpg" alt="" width="500px">
 
<svg>
  <defs>
    <clipPath id="star">
      <polygon points="98.4999978 153.75 38.2520165 185.424245 49.7583542 118.337123 1.01670635 70.8257603 68.3760155 61.037872 98.5000012 1.1379786e-14 128.624005 61.0378871 195.98331 70.8258091 147.241642 118.337136 158.747982 185.424247" />
    </clipPath>
  </defs>
</svg>

CSS

1
2
3

img {
  clip-path: url(#star); /* ссылка на элемент с маской */
}

https://jsfiddle.net/rp99vsmw/

@hebep · 31.07.2016, 20:10 **[ТС]**

Для ясности. Т.е наложить рисунок на другую которая определяет цветом и своей формой видимость рисунка.

Добавлено через 3 минуты
Да что-то типа того но форма сложная. Писать координатами очень трудоемко(плавные лини, окружности, изгибы).

Стоп я кажется понял. Возможно это то что надо) URL Может быть рисунок?

@Padimanskas · 31.07.2016, 21:08

Сообщение от hebep

URL Может быть рисунок?

в url ссылка на шаблон формы(обычно какой-нибудь элемент) или непосредственно описание формы(квадрат, круг, полигон и т.п.)

Новые блоги и статьи
Как программировать под HCL Notes и создавать свои продукты на ее основе InfoMaster 11.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой мощную платформу для разработки корпоративных приложений, которая сочетает в себе функции электронной почты, календаря,. . .	Как работать с SVN (Subversion) InfoMaster 11.01.2025 Введение Система контроля версий является неотъемлемой частью современного процесса разработки программного обеспечения. Она обеспечивает управление изменениями в коде, позволяет отслеживать. . .	Использование GraphQL в JavaScript InfoMaster 11.01.2025 Введение в GraphQL и его преимущества В современной разработке веб-приложений эффективный обмен данными между клиентом и сервером играет ключевую роль. GraphQL представляет собой язык запросов и. . .	Администрирование Git, продвинутые техники работы с Git InfoMaster 11.01.2025 Основы управления репозиторием Эффективное управление Git-репозиторием требует глубокого понимания механизмов контроля доступа и инструментов администрирования. Рассмотрим ключевые аспекты. . .	Что такое HCL Notes и как с ним работать InfoMaster 10.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой комплексную платформу для совместной работы и обмена информацией в корпоративной среде. Это многофункциональное решение,. . .	Как работать с Git из Windows и Visual Studio InfoMaster 10.01.2025 Работа с Git в Windows Работа с Git в операционной системе Windows может быть осуществлена с помощью различных инструментов, каждый из которых обладает своими уникальными возможностями и. . .
Аналог оператора switch case в Python InfoMaster 10.01.2025 Оператор switch case используется в программировании для выбора одного из нескольких вариантов исполнения кода. Однако в языке Python этот оператор отсутствует. Понимание аналогов switch case в. . .	Отличия абстрактного класса от интерфейса InfoMaster 10.01.2025 В современной разработке программного обеспечения существуют два основных механизма реализации абстракции: абстрактные классы и интерфейсы. Эти инструменты, хотя и схожи в своей основной цели -. . .	Как работать в Git InfoMaster 10.01.2025 Git — это одна из наиболее популярных систем контроля версий, которая активно используется разработчиками по всему миру. Она позволяет эффективно управлять изменениями в коде, координировать работу. . .	Реализация передвижения персонажа в Unity3d на C# InfoMaster 10.01.2025 Реализация передвижения персонажа в Unity3D начинается с правильной настройки проекта. Этот этап критически важен для создания отзывчивого и плавного управления. Рассмотрим основные шаги для создания. . .	Docker: руководство для начинающих InfoMaster 10.01.2025 В современном мире разработки программного обеспечения контейнеризация стала неотъемлемой частью процесса создания и развертывания приложений. Docker, как ведущая платформа контейнеризации, произвела. . .	Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .

@hebep 1 / 1 / 0 Регистрация: 27.07.2016 Сообщений: 11
		1
	Наложение друг на друга изображения и формы (маска, слои) 31.07.2016, 18:45. Показов 2840. Ответов 3 Метки нет (Все метки) Всем доброго вечера. Есть изображение-текстура и есть изображение-форма нужно наложить их друг на дурга так чтоб как к примеру в фотошопе маску т.е какая-то часть рисунка видна текстура а какая-то прозрачна и скрыта. Есть ли такая возможность в CSS, HTML5 или JavaScript? 0

@hebep 1 / 1 / 0 Регистрация: 27.07.2016 Сообщений: 11
	31.07.2016, 20:10 [ТС]	3
	Для ясности. Т.е наложить рисунок на другую которая определяет цветом и своей формой видимость рисунка. Добавлено через 3 минуты Да что-то типа того но форма сложная. Писать координатами очень трудоемко(плавные лини, окружности, изгибы). Стоп я кажется понял. Возможно это то что надо) URL Может быть рисунок? 0

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	31.07.2016, 21:08	4
	Сообщение от hebep URL Может быть рисунок? в url ссылка на шаблон формы(обычно какой-нибудь элемент) или непосредственно описание формы(квадрат, круг, полигон и т.п.) 0