4

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

1
  • 2
    А не могли бы вы привести пример того, что надо сделать картинкой, потому что не понятно, что вы имеете в виду. 19 мар 2018 в 9:54

3 ответа 3

9

Вариантов исполнения может быть великое множество. Используйте, например, 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>

5
  • 1
    жесть !!! зачем такие картинки! Я же на работе?
    – ikar
    19 мар 2018 в 10:17
  • К сожалению, я не могу знать, на работе вы или нет) Картинка для поднятия боевого духа! 19 мар 2018 в 12:05
  • А вот зачем -moz-box-shadow и -webkit-box-shadow? Такие браузеры как Chrome 4, Safari 3, FireFox 4 уже давно не надо поддерживать. 19 мар 2018 в 21:54
  • 1
    @VadimOvchinnikov лично я в проектах использую только -webkit-box-shadow по привычке, да и то пора это дело сокращать. Но, многие до сих пор свято верят в необходимость поддержки старых браузеров, для них и написано. 20 мар 2018 в 8:13
  • @AlexeyGiryayev Я бы выпилил, но это ваше дело. 20 мар 2018 в 8:15
3

Еще вариант с 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>

Еще вариант с img && box-shadow

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: rgba(10, 50, 51, 1);
  border-top: 1px solid transparent;
}

img {
  display: block;
  margin: 25px auto;
  background-image: url(http://man-man.nl/app/uploads/fly-images/12011/lingerie-dame-1200x545-c.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 120px;
  width: 520px;
  box-shadow: inset 0px 0px 0px 25px rgba(0, 0, 0, .7);
}
<img />

2
  • а костыль для IE11-10 есть?
    – ikar
    19 мар 2018 в 11:19
  • Глянь в ответе...
    – Air
    19 мар 2018 в 11:42
1

Внутрь:

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);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.