Можно ли добиться эффекта обрезки/маскирования изображения с помощью html + css3?

Я пытаюсь разместить красивую рамку вокруг изображения размером 250x250, используя только html и css. Разметка такая:

<div id="img-container"><img src="pic.jpg" border="0"/></div>

И css:

#img-container {
    height: 225px;
    width: 225px;
    padding: 3px;
    border: 1px solid black;
    z-index: 10;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

#img-container img {
    z-index: 5;
}

По сути, я хочу, чтобы контейнер div обрезал края изображения, выходящие за его границы. Это позволит добиться эффекта закругленных краев с помощью свойства border-radius (-moz-border-radius, -webkit-border-radius и т. д.) — если это действительно работает или даже может быть сделано. Ищу советы и рекомендации по этому поводу. Спасибо.

И, да, я явно не веб-дизайнер :)


html css image-clipping
person sa125    schedule 16.03.2010    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Да, это возможно, но вы должны установить изображение в качестве фона div с помощью CSS:

#img-container {
    height: 225px;
    width: 225px;
    padding: 3px;
    border: 1px solid black;
    background-image: url('pic.jpg');
    border-radius: 10px;
}

Это необходимо, иначе вы получите ужасные белые рамки вокруг изображения (проверено в Google Chrome).

person James Goodwin    schedule 16.03.2010

arrow_upward
1
arrow_downward

насколько я понял ваш вопрос, удаление

#img-container img {
    z-index: 5;
}

часть должна сделать свое дело.

Или вы можете использовать изображение в качестве фонового изображения:

#img-container {
    ...
    background: url(pic.jpg) no-repeat top left;
}
person whlk    schedule 16.03.2010