Блог

Главная - Вопросы по программированию - Абсолютное позиционирование изображения в оболочке border radius

Абсолютное позиционирование изображения в оболочке border radius

#css

#css

Вопрос:

У меня есть оболочка с радиусом границы. Внутри оболочки у меня есть изображение с абсолютным расположением в правом верхнем углу. Моя проблема в том, что изображение не обрезается / не скрывается под оболочкой с радиусом границы. Я пробовал overflow: hidden в оболочке, но это не работает. Смотрите изображение ниже.

введите описание изображения здесь

Ответ №1:

На тег изображения не влияет border-radius.

Лучше всего использовать изображение в качестве фона, например:

 <div id="someimage" style="background:url('image.jpg');border-radius: 5px; height: 200px; width: 500px;"></div>

Элемент (в приведенном выше примере div) должен содержать размер фактического изображения), и если вы не используете CSS3, изображение не может быть изменено как <img> тег

Комментарии:

1. вероятно, это проблема, хотя на самом деле это зависит от браузера: некоторые браузеры обрезают изображения переднего плана, другие — нет.

2. @Spudley: Я думаю, проблема в том, что изогнутые границы затрагивают внутреннюю часть поля содержимого, тогда как неискривленные границы остаются полностью за пределами поля содержимого, поэтому для них эта проблема не возникает. Поле содержимого (и, следовательно, отсечение) остается прямоугольным, даже если границы нет. Имеет ли это смысл или мое мышление сбито с толку усталостью?

3. @mu слишком короткое, я не знаю о Spudley, но я в замешательстве. 😛

4. AFAIK, содержимое отображается внутри поля содержимого, а граница проходит вокруг поля содержимого. Изогнутый угол должен немного врезаться в поле содержимого (которое имеет прямоугольную форму); тогда содержимое, нарисованное сверху, перезапишет внутреннюю часть изогнутого угла.

5. @Spudley, какой бы это был браузер?

Ответ №2:

Вы могли бы использовать отдельное абсолютно позиционированное <div> для границы, чтобы вы могли разместить границу над вашим абсолютно позиционированным изображением. Например:

 <div id="wrapper">
    <div id="inner">
        <img id="i" width="75" height="75" src="http://placekitten.com/75/75">
    </div>
    <div id="border"></div>
</div>

И немного CSS (только свойства border radius WebKit, остальное оставлено в качестве упражнения для читателя):

 #wrapper {
    position: relative;
}

#inner {
    margin: 2px; /* Make room for the border */
    width: 200px;
    height: 200px;
    position: relative;
}

#border {
    -webkit-border-radius: 5px;
    border: 2px solid black;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
}

#i {
    position: absolute;
    top: 0;
    right: 0;
}

И обычный пример: http://jsfiddle.net/ambiguous/6e622 /

<div id="border"> Это, конечно, взлом (и я чувствую себя немного грязно, придумывая это), но, возможно, это сработает для вас.