Прозрачность по краям фона

Question

Как реализовать прозрачность по краям блока? Похожую на прозрачность по бокам карты на этом скриншоте..

Answer 1

Можно провернуть нечто подобное с помощью box-shadow:

.example {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  background-image: url(pic.jpg);
  box-shadow: inset 0 0 15px 15px rgba(0, 0, 0, 0.6);
}

<div class="example"></div>

Answer 2

можно сделать градиентную маску (например радиальную)

div, img { 
  position:absolute; top:0; left:0; width:250px; height:250px; 
 }
 
img {
      -webkit-mask-image:-webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
      mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div>
    
<img src='https://static3.depositphotos.com/1000528/109/i/600/depositphotos_1094381-stock-photo-beautiful-beach-and-sea.jpg' />

Можно сделать наложение непрозрачного изображения меньшего размера на полупрозрачное большего размера, вместо img использовать div с соответствующим задним фоном

Answer 3

Вариант, если фон одного цвета

body {
  background: #444;
}

.minimap {
  display: block;
  width: 200px;
  height: 140px;
  position: relative;
}

.minimap::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 10px 12px #444 inset;
  position: absolute;
  left: 0;
  top: 0;
}

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

<div class="minimap">
  <img src="//i.imgur.com/TRJSwhF.png">
</div>

Если использовать так называемый alpha слой при помощи mask

body {
  background: url('//i.imgur.com/6U5tB7F.png') no-repeat center center / cover;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
}

.minimap {
  display: block;
  width: 200px;
  height: 140px;
  position: fixed;
  left: 10px;
  bottom: 10px;
  --blur: 15px;
  --spread: 10px;
  /* не изменять */
  --grad: transparent calc(var(--spread)), 
      #fff calc(var(--spread) + var(--blur)), 
      #fff calc(100% - (var(--spread) + var(--blur))), 
      transparent calc(100% - var(--spread));
  /* не изменять */
  mask-image: 
    linear-gradient(to right, var(--grad)),
    linear-gradient(to bottom, var(--grad));
  mask-composite: intersect;
}

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

<div class="minimap">
  <img src="//i.imgur.com/TRJSwhF.png">
</div>

БЛОГ НА HUSL

Прозрачность по краям фона

Ответы (3 шт):