переполнение: скрытый не работает при абсолютном позиционировании в браузерах webkit (пожалуйста, помогите)

Если вы посмотрите на этот пример в браузере webkit, chrome, safari

http://freemotive.co.uk/dev/exp2.html

переполнение: скрытый набор для элемента span, похоже, не работает при абсолютном позиционировании.

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

я читал, что это ошибка в webkit, однако мне интересно, есть ли способ решить эту проблему?

Я играл с идеями, но пока ничего не получилось.

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


overflow hidden elements
person Tom Champion    schedule 19.12.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если я вас правильно понял, вы в основном пытаетесь «обрамить» изображение внутри круга, используя диапазон с радиусом границы и переполнением: скрытый ... почему бы не попробовать применить радиус границы к самому элементу изображения?

person Matt Diamond    schedule 19.12.2011
comment
если вы посмотрите на желаемый результат в firefox, вы увидите, что диапазон расширяется при наведении, открывая немного больше изображения ниже, применение этого к img расширит img, сделав его пиксельным. - person Tom Champion; 20.12.2011
comment
Итак, я разобрался, но я не совсем уверен, почему это работает так, а не иначе, если вы применяете img через css, встроенный с style="background-image: url(../image/);", это устраняет скрытую проблему переполнения для позиционированных элементов в Chrome и Safari. надеюсь, что это поможет любому, кто сталкивается с той же проблемой. - person Tom Champion; 20.12.2011