Полупрозрачная рамка внутри картинки

189
19 марта 2018, 23:33

Полупрозрачная рамка внутри картинки, как сделать?

Answer 1

Вариантов исполнения может быть великое множество. Используйте, например, box-shadow.

* { 
margin: 0; 
padding: 0; 
} 
img { 
position: relative; 
width: 100%; 
z-index: -1; 
} 
div { 
-webkit-box-shadow: inset 0px 0px 0px 19px rgba(0,0,0,0.3); 
-moz-box-shadow: inset 0px 0px 0px 19px rgba(0,0,0,0.3); 
box-shadow: inset 0px 0px 0px 19px rgba(0,0,0,0.3); 
}
<div> 
<img src="http://man-man.nl/app/uploads/fly-images/12011/lingerie-dame-1200x545-c.jpg" /> 
</div>

Answer 2

Еще вариант с outline outline-offset

* { 
  margin: 0; 
  padding: 0; 
} 
 
img { 
  width: 700px; 
  height: 370px; 
  outline-offset: -30px; 
  outline: 30px solid rgba(0, 0, 0, .5); 
}
<img src="http://man-man.nl/app/uploads/fly-images/12011/lingerie-dame-1200x545-c.jpg" />

Костыль, для IE

* { 
  margin: 0; 
  padding: 0; 
} 
 
img { 
  width: 700px; 
  height: 370px; 
  position: absolute; 
} 
 
.box { 
  position: relative; 
  width: 700px; 
  height: 370px; 
} 
 
.box:after { 
  content: ""; 
  position: absolute; 
  display: block; 
  width: calc(100% - 60px); 
  height: calc(100% - 60px); 
  border: 30px solid rgba(0, 0, 0, .5); 
}
<div class="box"> 
  <img src="http://man-man.nl/app/uploads/fly-images/12011/lingerie-dame-1200x545-c.jpg" /> 
</div>

Answer 3

Внутрь:

box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2) inset;

Внешняя:

box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2);
READ ALSO
неожидаемое поведение при :hover

неожидаемое поведение при :hover

Начал изучать grid в cssстолкнулся с непонятной ситуацией https://codepen

194
Уникальные значения в поле json (mysql)

Уникальные значения в поле json (mysql)

Доброго времени суток

217
Mysql один запрос из четырех таблиц

Mysql один запрос из четырех таблиц

Пишу систему подсчета и перераспределения трафика

242
Агрегаты в elasticsearch против агрегирующих функций в реляционных бд

Агрегаты в elasticsearch против агрегирующих функций в реляционных бд

Наткнулся в одном видео на пример, когда количество товаров в категориях для меню доставалось из elasticsearch:

192