изображение curvycorners в выпуске div - PullRequest
Новая
       27

изображение curvycorners в выпуске div

0 голосов
/ 19 октября 2011

Я использую jquery пышные углы. Я знаю, что доступен еще один плагин с именем jquery corner, однако размер его файла значительно больше, чем в извилистых углах, я решил использовать пышные углы.

У меня есть разметка вроде: 

<div class="roundedBox" style="border-width: 4px; margin-left: 10px; margin-right: 10px;
margin-top: 10px; margin-bottom: 10px; border: solid 4px #008FD9;">
    <asp:Image Width="140"  ID="innerImg" runat="server" style="overflow:hidden;" />
</div>

, а затем в JS я делаю: 

 curvyCorners.addEvent(window, 'load', initCorners);
        function initCorners() {
              var settings = {
              tl: { radius: 20 },
              tr: { radius: 20 },
              bl: { radius: 20 },
              br: { radius: 20 },
              antiAlias: true
             };
             curvyCorners(settings, ".roundedBox");
         }

Проблема в том, что мое изображение накладывается поверх div и выглядит очень некрасиво. Как я могу решить это?

Прикрепленное изображение показывает проблему:

enter image description here

Ответы [ 4 ]

1 голос
/ 19 октября 2011

Я не уверен, как работает плагин, но, похоже, вам нужно применить к изображению тот же стиль, что и для div.

Радиус изображения должен быть только 16, чтобы учесть границу изображения.

1 голос
/ 11 января 2012

Попробуйте добавить overflow:hidden в свой .roundedBox класс CSS.

0 голосов
/ 12 января 2012

curvyCorners не поддерживает элемент изображения:

элементы не могут быть округлены с помощью curvyCorners. Вместо этого используйте элемент и установите изображение в качестве фонового изображения.

curvyCorners

У меня много проблем с этим плагином, и мне пришлось полностью от него избавиться, вместо этого я использовал круглые углы malsup.

0 голосов
/ 19 октября 2011

Я не знаком с пышными углами, но мой инстинкт говорит, что это проблема z-index .

...