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

194

13 июня 2018, 12:30

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

Answer 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; 
}

<div class="img-block"> 
  <img src="http://via.placeholder.com/150x150"> 
  <div class="border"></div> 
</div>

Answer 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; 
}

<div class="item"> 
  <img src="https://cdn.wallaps.com/wallpapers/150000/144504.jpg" alt=""> 
</div>

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

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%; 
}

<div class="item"> 
  <img src="https://cdn.wallaps.com/wallpapers/150000/144504.jpg" alt=""> 
</div>

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

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

<div class="item"> 
  <img src="https://cdn.wallaps.com/wallpapers/150000/144504.jpg" alt=""> 
</div>

Answer 3

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  <defs> 
    <mask id="mask"> 
      <rect width="100%" height="100%" fill="rgba(255,255,255,0.5)"/> 
      <circle r="75" cx="75" cy="75"/> 
    </mask> 
  </defs> 
  <image xlink:href="http://pravetsresidence.bg/en/wp-content/uploads/2017/07/town-house-exterior1-150x150.jpg"/> 
  <rect width="150px" height="150px" fill="white" mask="url(#mask)"/> 
</svg>

Answer 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%; 
}

<div></div>

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

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; /* Указать нужную высоту и ширину здесь */ 
}

<div></div>

Я использую 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.