Описание тега webkit-mask
Свойство CSS3 для применения масок к изображениям.
1
ответ
Есть ли CSS3 фильтр для превращения цветов с градиентами в сплошные цвета
У меня есть особый случай, в котором я использую -webkit-mask с radial-gradient создать маленькие точки на фоновом изображении. Цвет этих точек transparent так что фоновое изображение можно увидеть внутри точек. Теперь есть случай, когда цвет в кажд…
11 июл '14 в 11:32
2
ответа
Как центрировать источник видео в форме круга, используя CSS, HTML
Я думаю, что этот вопрос задавался много раз. И некоторые из них работают либо на Chrome, либо на Firefox. Я попытался с решением: .rc{ width: 250px; height: 250px; border-radius: 100%; -webkit-mask-image: -webkit-radial-gradient(circle, white 100%,…
29 фев '16 в 10:25
1
ответ
Как определить, когда -webkit-mask-box-image загружен
Я генерирую изображение маски на веб-сервере программным способом, а затем применяю его к элементу HTML со следующим кодом: imageToMask.style["-webkit-mask-box-image"] = "url('" + featherURL +"') 100 stretch"; Как я могу узнать, когда изображение во…
11 июл '12 в 01:04
1
ответ
Перевернутый / обратный закругленный угол CSS3 для всплывающей подсказки
Я пытаюсь создать всплывающую подсказку с помощью CSS: Вот как я пытаюсь это решить: http://jsfiddle.net/NXLuZ/ Итак, в основном я использую маскировку css3: div:after { width: 61px; height: 10px; background: #fff; -webkit-mask-image: radial-gradien…
10 янв '14 в 20:00
3
ответа
Динамическое маскирование с помощью CSS
Я хотел бы иметь маску, которая исчезает 16 пикселей с обеих сторон. Так вроде: 16px fading in - white - 16px fading out, Что я получил, это: ДЕМО -webkit-mask-image: linear-gradient(to right, transparent, white), linear-gradient(to left, transparen…
21 авг '14 в 07:08
1
ответ
CSS: автоматический откат / обходной путь для устройств, не поддерживающих маску изображения CSS3 и / или псевдоэлементы
Для моей панели навигации на мобильном телефоне у меня есть фоновые кнопки (по умолчанию). Сверху я использую: после, чтобы вставить элемент с фоном (простой серый), который при наведении курсора меняется на (lt. Blue) и content( url(image.alpha-png…
09 авг '11 в 17:53
0
ответов
Элемент печати в стиле webkit-mask-box-image
Я хочу напечатать (в браузере) div с двумя картинками на нем. Один div (#pic1) имеет фоновое изображение льва, другой div (#pic2) - это то же изображение, но стилизованное с помощью "-webkit-mask-box-image" и background-color (вид наложения цвета в …
07 фев '17 в 00:37
1
ответ
Используйте цвет маски веб-набора на PNG
Я знаю, как сделать это с помощью изображения, но оно должно динамически меняться. Есть ли какие-то хитрости в использовании цвета вместо изображения? Похоже, очень мало документации по использованию масок webkit. Я использую это в расширении Chrome…
19 авг '12 в 21:25
3
ответа
SVG не отображается должным образом на родном браузере Android 4.x
Вот как должны выглядеть SVG И вот так выглядят SVG в родном браузере Android 4 на Samsum Galaxy S3 Вот как они встраиваются в страницу .petal { -webkit-mask-image:url(../images/petal.svg); -webkit-mask-size: 100%; background-color:#fff; -webkit-tra…
25 апр '13 в 16:14
1
ответ
Изменение -webkit-mask-position с помощью JavaScript
Я работаю над проектом веб-просмотра для iPad, в котором требуется, чтобы ползунок перемещался вперед и назад по двум изображениям, раскрывая одно или другое при перемещении влево или вправо. Из-за ограничений проекта я не могу использовать jQuery. …
07 авг '12 в 13:46
1
ответ
Можете ли вы использовать CSS-спрайт для webkit-mask-box-image (или обрезать его?)
Я играю с -webkit-mask-box-image собственность css. <div style=" background-color: red; -webkit-mask-box-image: url('images/cards/set1.png'); "></div> Это прекрасно работает. Я заканчиваю с красным элементом в форме маски изображения. Ед…
04 июл '11 в 21:13
2
ответа
Clip-path/web-kit-mask работает, когда SVG - отдельный файл, но не когда он встроен
Я использую следующую реализацию, чтобы замаскировать элемент, используя SVG и немного CSS. //styles.css .elementToBeMasked { width: 100%; height: 100%; position: absolute; z-index: 1; display: block; overflow: hidden; clip-path:url(rhombus.svg#rhom…
27 ноя '13 в 08:48