Border-Box Прозрачный бордюр

Question

Я пытаюсь использовать рамку для создания эффекта черной границы 50% прозрачности вокруг трех изображений столбцов. Я прочитал это, чтобы заставить границу двигаться внутрь, чтобы использовать отступы, и я не могу заставить его работать.

Вот мой код CSS:

div.column-image {
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1em solid rgba(0, 0, 0, 0.5);
padding: 5px;
float: left;
}

И это результат

То, что я хочу, это чтобы граница шла внутрь, чтобы изображение просматривалось через границу.

Вот пример:

---

Я пытался следовать примерам из этого урока: CSS-хитрости: прозрачные границы с background-clip, и потерпел неудачу.

Пожалуйста, помогите, я не знаю, что делать ~

Редактировать: вот живая версия сайта

Answer 1

Будете ли вы готовы сделать это с помощью решения для фона и тени? Лучше придерживаться минимума и сокращать ненужную разметку (как в вашем CSS, так и в HTML). Все, что вам нужно, это один div, который будет содержать и рамку, и изображение.

.transparent-bordered-image {
    background-image: url(http://your-url-here);
    background-size: cover;
    box-shadow: inset 0 0 0 30px rgba(0,0,0,0.5);
   -webkit-box-shadow: inset 0 0 0 30px rgba(0,0,0,0.5);
}

Это пример: http://jsfiddle.net/fBY9z/1/

Answer 2

Как это? Пример jsFiddle

Я добавил границу через псевдоэлемент, помещенный в обертку div элемент.

К сожалению, вы не можете использовать элемент псевдо на img сам, как говорится в спецификации:

12.1 Псевдоэлементы:before и: after (ссылка)

Заметка. Эта спецификация не полностью определяет взаимодействие:before и: after с замененными элементами (такими как IMG в HTML). Это будет определено более подробно в будущей спецификации.

HTML

<div id="imgwrap">
    <img/>
</div>

CSS

#imgwrap {
    position:relative;
    display:inline-block;
}
#imgwrap:after {
    content:"\A";
    border:20px solid rgba(10, 0, 255, 0.5);
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    box-sizing: border-box;
    -wekbit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
img { vertical-align:top; }