Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/8: Рейтинг темы: голосов - 8, средняя оценка - 4.75
1 / 1 / 0
Регистрация: 27.07.2016
Сообщений: 11
1

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

31.07.2016, 18:45. Просмотров 1545. Ответов 3
Метки нет (Все метки)


Всем доброго вечера. Есть изображение-текстура и есть изображение-форма нужно наложить их друг на дурга так чтоб как к примеру в фотошопе маску т.е какая-то часть рисунка видна текстура а какая-то прозрачна и скрыта. Есть ли такая возможность в CSS, HTML5 или JavaScript?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
31.07.2016, 18:45
Ответы с готовыми решениями:

Наложение нескольких изображений друг на друга с их выбором
Приветствую всех. На одной из страниц сайта хочу сделать выбор из двух форм ввода input типа...

Не работает вторая форма обратной связи (формы зависят друг от друга)
Всем привет, такая проблема: Есть две формы обратной связи. Если вводить данные в первую форму и...

Наложение изображения друг на друга
Допустим есть Image1. Хочу реализовать следующее: - загружаю еще картинку которую я могу...

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

__________________
Помогаю в написании студенческих работ здесь.
Записывайтесь на профессиональные курсы Fullstack-разработчиков на JavaScript‌
3
Superposition
948 / 614 / 256
Регистрация: 27.10.2013
Сообщений: 2,084
31.07.2016, 20:05 2
Наверное вам нужно маскирование(обтравочная маска) и отсечение. Это делается с помощью свойства css clip-path и svg.

HTML5
1
2
3
4
5
6
7
8
9
<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/
0
1 / 1 / 0
Регистрация: 27.07.2016
Сообщений: 11
31.07.2016, 20:10  [ТС] 3
Для ясности. Т.е наложить рисунок на другую которая определяет цветом и своей формой видимость рисунка.

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

Стоп я кажется понял. Возможно это то что надо) URL Может быть рисунок?
0
Superposition
948 / 614 / 256
Регистрация: 27.10.2013
Сообщений: 2,084
31.07.2016, 21:08 4
Цитата Сообщение от hebep Посмотреть сообщение
URL Может быть рисунок?
в url ссылка на шаблон формы(обычно какой-нибудь элемент) или непосредственно описание формы(квадрат, круг, полигон и т.п.)
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
31.07.2016, 21:08

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

слои налезают друг на друга
Помогите, пожалуйса! Я уже весь Интернет облазил, глаза болят - и про резиновые сайты читал, и про...

Наложение друг на друга
Добрый день форумчане у меня происходит вот такое с чем это может быть связано?

Наложение контролов друг на друга
Мне нужно, чтобы Lable накладывался на textbox. Как такое можно осуществить?

Наложение Image друг на друга
немогу осуществить! использую формат пнг f хранилище для изображения на Image2 надо чтобы на f...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.