7

Пример изображения с круглой рамкой

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

0

4 ответа 4

5

На 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>

3

Можно и на изи без 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>

6
  • Можно <div class="border"></div> заменить :before
    – De.Minov
    26 мая 2018 в 11:09
  • @Arthur, писать стили в строчку религия не позволяет?
    – De.Minov
    26 мая 2018 в 11:10
  • Это называется читабельность
    – Arthur
    26 мая 2018 в 11:13
  • Ну если только для этого)
    – De.Minov
    26 мая 2018 в 11:14
  • Правки делаются для улучшения вопросов и ответов(то есть в благих целях)
    – Arthur
    26 мая 2018 в 11:16
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>

3
  • раз ты сделал уж на SVG то я не буду ... :))
    – user33274
    26 мая 2018 в 11:39
  • 1
    @МаксимЛенский, надо было для активности ответить))
    – Arthur
    26 мая 2018 в 11:40
  • в Лисе не видно вообще ни чего ....белое окно
    – user33274
    29 мая 2018 в 12:05
3

Можно также использовать для этого наслаивающийся псевдоэлемент с бесконечной тенью и 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.

6
  • А разве box-shadow не повлияет на производительность?
    – Arthur
    26 мая 2018 в 16:50
  • @Arthur А откуда информация что box-shadow влияет на производительность? И по сравнению с каким методом это будет более медленным? 26 мая 2018 в 16:52
  • На одном сайте нашёл=) — "Всё, что предполагает выполнение изменений/расчётов перед отрисовкой страницы, будет трудозатратным для браузера. Например, box-shadow, border-radius, прозрачность." Допустим по сравнению с вашим вторым вариантом:) (Или я возможно не так понял эти слова)
    – Arthur
    26 мая 2018 в 16:54
  • 1
    @Arthur Ну тогда ваш комментарий подходит для всех остальных ответов тоже:) Тогда тут идеальным ответом будет отредактировать картинку в редакторе и использовать её. Расчёт градиентов мне не кажется дешёвой операцией. А ответ Максима Ленского, скорей всего, вообще "убийца" производительности, так как смешивание картинок вообще мне видится ещё более сложной операцией. 26 мая 2018 в 16:56
  • Зато креативно:D (ответы Максима). Похоже во всех случаях выгодно использовать картинки))
    – Arthur
    26 мая 2018 в 19:20

Ваш ответ

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

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