CSS: - webkit-маска-изображение

Я использую свойство CSS 

-webkit-mask-image

чтобы применить маску к изображению. Однако в chrome маска перемещается при прокрутке изображения со страницы.

Как предотвратить перемещение маски? Или это артефакт рендеринга?

JSFiddle:http://jsfiddle.net/DZTvR/ (прокрутите вниз рамку с картой).

9
css css3 google-chrome webkit

3 ответов

вам придется изменить размер .ПНГ, но это, кажется, работает для меня:

-webkit-mask-image: url(http://s21.postimg.org/gfep7h1h3/trans_Test.png);
-o-mask-image: url(http://s21.postimg.org/gfep7h1h3/trans_Test.png);
-moz-mask-image: url(http://s21.postimg.org/gfep7h1h3/trans_Test.png);
mask-image: url(http://s21.postimg.org/gfep7h1h3/trans_Test.png);

http://jsfiddle.net/DZTvR/13/

Это также должно грациозно ухудшаться для IE

enter image description here

Edit:

Это лучший ответ:https://stackoverflow.com/a/4579617/1477388

пример:http://search.missouristate.edu/map/mobile/examples/corners.htm

7

замените данные url-адресом файла изображения

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

о вашей ситуации, есть эта проблема на chromium сообщается mihaip@chromium.org, Aug 26, 2013 : http://code.google.com/p/chromium/issues/detail?id=279319 и это о подобном предмете http://code.google.com/p/chromium/issues/detail?id=99052

для дополнения информации: - webkit-mask-attachment: больше не поддерживается в Chrome 24 и более поздних версиях. Поддерживается в Safari 4.0.

3

Если я правильно понимаю ваш вопрос... Вы должны иметь возможность использовать SVG clip-path, а затем позиционировать обертку div, как вам нравится.

Пример

body {
    height: 1800px;
}
#wrapper {
    position:absolute;
    top:100px;
    left:100px;
}
#map1 {
    width: 251px;
    height: 254px;
    -webkit-clip-path: url(#clipping);
    clip-path: url(#clipping);
}
svg {
    height:0;
}

<div id="wrapper">
    <div id="map1"></div>
</div>
<svg>
    <defs>
        <clipPath id="clipping">
            <polygon points="100,10 40,180 190,60 10,60 160,180" />
        </clipPath>
    </defs>
</svg>

протестировано и работает в Firefox и Chrome.

0