CSS: -webkit-маска-образ

Я использую свойство CSSCSS: -webkit-маска-образ

-webkit-mask-image

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

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

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

источник

2013-09-13 Andy Hin

Вы можете использовать ['-webkit-mask-attachment'] (http://css-infos.net/property/-webkit-mask-attachment), но это только для Safari v4 и выше :( – Adrift

@Adrift - да, я видел это, но какое-либо решение для chrome? –

В gChrome, когда я отключу, снова включите свойство.-webkit-mask-image, макет вернется на место. Можете ли вы попробовать свою маскировку с помощью образа-файла вместо данных: image/png; base64 ?? –

Вы должны изменить размер .png, но это, кажется, работает для меня:

-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 < = 8.

enter image description here

Редактировать:

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

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

источник

2013-09-16 19:52:03 user1477388

Возможно, ваш ответ применим к http://stackoverflow.com/questions/18478364/google-map-radius-corner –

Да, я тоже, возможно, разместил его там, или, по крайней мере, ссылку туда оттуда. Спасибо. – user1477388

@ user1477388 Это выглядит лучше, но если вы прокрутите, вы заметите, backgrou nd изображение перемещается за окном клипа. –

Заменить данные с изображением файл URL

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

О ситуации, есть эта проблема хрома сообщает mihaip @ chromium.org, 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: No more supported in Chrome 24 and later. Supported in Safari 4.0.

источник

2013-09-16 19:58:39

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

Working Example

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.

источник

2013-09-22 08:58:31 apaul

CSS: -webkit-маска-образ

ответ

Смежные вопросы