Border-Box Transparent Border

Question

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

Вот мой 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 Tricks: Transparent Borders with background-clip, и не увенчались успехом.

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

Edit: Вот живая версия site

Answer 1

Как это? jsFiddle example

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

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

12.1: до и после того, как: псевдо-элементов(reference)

Примечание. Эта спецификация не полностью определяет взаимодействие: 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; } 

Answer 2

Хотите быть открыт для делать это через раствор фонового изображения и коробчатого тень? Лучше практиковать, чтобы он был минимальным и сократил ненужную разметку (как в 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/