Полупрозрачная рамка внутри картинки, как сделать?
Вариантов исполнения может быть великое множество. Используйте, например, 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>
Еще вариант с 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>
Внутрь:
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);
Виртуальный выделенный сервер (VDS) становится отличным выбором
Начал изучать grid в cssстолкнулся с непонятной ситуацией https://codepen
Наткнулся в одном видео на пример, когда количество товаров в категориях для меню доставалось из elasticsearch: