Полупрозрачная круглая рамка для фото

#html #css #css3

В продолжении темы Полупрозрачная рамка внутри картинки —
а если нужна рамка с закругленными углами, или полностью круглая, т.е. прямоугольное
фото центр чистый, остальное пространство занято полупрозрачной рамкой, внутренняя
часть в виде круга?
    

Ответы

Ответ 1

Можно и на изи без SVG..



.img-block {
  display: block;
  width: 150px;
  height: 150px;
  position: relative;
  overflow: hidden;
}

.img-block img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.img-block .border {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 100px rgba(255, 0, 0, .5);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

  
  




Ответ 2

На SVG позже сделаю.
mix-blend-mode плохо поддерживается, но эффекты получаются невероятные:



img {
  width: 480px;
}

.item {
  width: 480px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.item:after {
  content: "";
  display: block;
  width: inherit;
  height: 100%;
  background: rgba(255, 5, 255, .9);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: screen
}

.item:before {
  content: "";
  display: block;
  width: 90%;
  height: 90%;
  background: rgba(250, 250, 250, 0.8);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  mix-blend-mode: color;
}

  





Второй пример: 



img {
  width: 480px;
}

.item {
  width: 480px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.item:after {
  content: "";
  display: block;
  width: inherit;
  height: 100%;
  background: rgba(255, 5, 255, .9);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: darken;
}

.item:before {
  content: "";
  display: block;
  width: 90%;
  height: 90%;
  background: url(https://cdn.wallaps.com/wallpapers/150000/144504.jpg);
  position: absolute;
  top: 50%;
  left: 50%;
  background-size: 100% 100%;
  z-index: 3;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

  





Третий вариант:



img {
  width: 480px;
}

.item {
  width: 480px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.item:after {
  content: "";
  display: block;
  width: inherit;
  height: 100%;
  background: rgba(255, 255, 255, .0);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: color-dodge;
  filter: grayscale(0);
}

.item:before {
  content: "";
  display: block;
  width: 90%;
  height: 90%;
  background: url(https://cdn.wallaps.com/wallpapers/150000/144504.jpg);
  position: absolute;
  top: 50%;
  left: 50%;
  background-size: 100% 100%;
  z-index: 3;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: grayscale(100);
}

  



Ответ 3

SVG. Пример с использованием mask:






Ответ 4

Можно также использовать для этого наслаивающийся псевдоэлемент с бесконечной тенью
и border-radius:



body {
  margin: 0;
}

div {
  background-image: url("https://i.stack.imgur.com/sPNoH.jpg");
  background-size: cover;
  height: 100vh; /* Указать нужную высоту и ширину здесь */
  position: relative;
}

div:after {
  content: "";
  
  /* накрыть картинку полностью */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  /* бесконечная тень */
  /* fallback для IE, так как IE не распознаёт единицы vmax */
  box-shadow: 0 0 0 99999px rgba(255, 255, 255, .6);
  /* для остальных браузеров, которые понимают vmax */
  box-shadow: 0 0 0 100vmax rgba(255, 255, 255, .6);
 
  border-radius: 50%;
}







Для некоторых ситуаций вам вполне подойдёт полупрозрачный радиальный градиент с полностью
прозрачной областью для картинки ("вырез"):



body {
  margin: 0;
}

div {
  background-image:
    radial-gradient(transparent 70%, rgba(255, 255, 255, 0.6) 0),
    url("https://i.stack.imgur.com/sPNoH.jpg");
  background-size: cover;
  height: 100vh; /* Указать нужную высоту и ширину здесь */
}





Я использую 0 как второе значение (rgba(255, 255, 255, 0.6) 0) в радиальном градиенте,
чтобы не дублировать первое, так как по спецификации ступенька градиента не может быть
меньше предыдущего значения.


  If a color-stop has a position that is less than the specified position of any
color-stop before it in the list, set its position to be equal to the largest specified
position of any color-stop before it.