Прозрачная граница над изображением

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

Например, см. изображение ниже:

Чтобы добиться этого, я попробовал следующий код, но сталкиваюсь со следующими проблемами:

Граница не над изображением; его вокруг изображения и не позволяя изображению соответствовать 100% внутри родительского div
Чтобы сделать прозрачную границу, я использовал "непрозрачность", но это также делает прозрачным изображение, которое мне не нужно.

Вы можете проверить код здесь: http://jsfiddle.net/6GK45/

Я мог бы создать div и сделать прозрачный цвет границы, а затем поместить его поверх изображения, но проблема в том, что ширина моего изображения фиксирована (277px), но высота нет. Так что это не сработает для меня.

Не могли бы вы рассказать мне, как создать прозрачную рамку изображения и поместить ее поверх изображения так же, как на изображении выше?

HTML:

<div class="box" >  
   <img class="lightbox" src="myimage.jpg" />
   This is text
</div>

CSS

.box {
    width:277px; 
    background:#FCFBDF;    
}

.lightbox {
    border: 5px solid red;
    z-index:999; 
    opacity:0.3; 
}

img {
    width:277px;
}

Ответ 1

Как это - он использует: после создания псевдоэлемента, который помещает границу поверх изображения, а не за ее пределами. http://jsfiddle.net/6GK45/8/

.imgWrap:after{
    content:"";
    position:absolute;
    top:0; bottom:0; left:0; right:0;
    opacity:0.5;
    border:5px solid red;
}

ОБНОВЛЕНИЕ: Если важно сохранить возможность щелчка правой кнопкой мыши по изображению, вы можете сделать это с помощью дополнительной обертки: http://jsfiddle.net/6GK45/24/

Ответ 2

Как сказал Донован, rgba для пограничного цвета - но граница на элементе, содержащем изображение, а затем изображение "вытащили" наружу под границу с использованием отрицательного поля и z-индекса - вот так, http://jsfiddle.net/6GK45/7/

<div class="box" >  
    <span class="lightbox"><img …></span>
…
</div>

.lightbox{
   display:block;
   width:267px;
   border:5px solid rgba(255,255,255,.75);
}
.lightbox img{
    display:block;
    width:277px;
    margin:-5px;
    position:relative;
    z-index:-1;
}

Ответ 3

Для всех, кто по-прежнему работает в Google: это можно добиться с помощью CSS только с помощью свойства outline:

HTML

<img class="inset-border" src=".." alt="">

CSS

.inset-border {
  outline: 5px solid rgba(0,0,0,.5);
  outline-offset: -5px;
}

См. пример здесь: http://jsfiddle.net/9aqbe79f/

Ответ 4

Если вам нужна граница с прозрачностью, вы можете использовать код RGBA. "A" означает alpha, поэтому вы можете изменить прозрачность.

border: 5px solid rgba(255,0,0, 0.3) ;

Вы можете использовать z-index, чтобы поместить свой ящик с рамкой над вашим изображением, если вы поместите изображение и поле в положение абсолютное, относительное.

Ответ 5

Я обновил вашу скрипку. http://jsfiddle.net/6GK45/21/

Что вам нужно сделать, это установить изображение в качестве фона родительского div, а затем настроить ширину/высоту дочернего div, чтобы обнять изображение соответственно.

//make js fiddle work