Кросс-браузерные обтравочные маски - PullRequest
Новая
       31

Кросс-браузерные обтравочные маски

3 голосов
/ 15 февраля 2011

Мой веб-сайт имеет навигацию, представленную в виде списка кнопок-панцирей с закругленными углами .

Каждая кнопка должна иметь свой собственный фон, который является фотографией. Фотография больше кнопки и должна перемещаться в ответ на движение мыши над этой кнопкой. У нас есть эффект, как будто мы смотрим в окно.

Навигация имеет следующую структуру HTML: "ul> li> a> img".

Я думаю, что каждый "ul> li" должен быть прямоугольником с круглым углом и действовать как обтравочная маска для изображения.

Настройка «переполнение: скрыто;» не работает, потому что область отсечения - это простой прямоугольник без закругленных углов.

Свойства CSS, как показано ниже, работают в браузерах Webkit, но не в Firefox. 

mask-image: url(/images/mask.png);
mask-position: 0 0;
mask-repeat: no-repeat no-repeat;
mask-size: 125pt 77pt;

Что такое кросс-браузерный способ сделать это?

Ответы [ 2 ]

6 голосов
/ 16 февраля 2011

Я считаю, что лучший способ сделать это - использовать переполнение: скрытое.

Все, что находится внутри ваших кнопок «div / li», будет обрезано до размеров кнопок.Хорошо работает на закругленных углах.

например (пример div) (желтый прямоугольник - изображение 400 x 400, красный прямоугольник - 200 x 200 .. пример = chrome / -webkit-) <html><br> <style> .box{width:200px; height:200px; background:red;overflow:hidden;border-radius:30px;} .image {width:400px; height:400px; background:yellow;}</p> <p><&#47;style></p> <p><div class="box"> <div class="image"> Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image <&#47;div></p> <p><&#47;div> <&#47;html>

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

1 голос
/ 15 февраля 2011

Вы можете задать каждому li div ширину и высоту, а затем использовать CSS background, чтобы применить изображение с позицией background-position, а затем использовать его для закругленных углов:этот файл HTC для поддержки IE:

http://code.google.com/p/curved-corner/

...