主页 / 问题 / 1592423
Accepted
Dream
Asked:2024-08-31 01:26:51 +0000 UTC2024-08-31 01:26:51 +0000 UTC

头像框外变暗

  • 772

大家好，X.com从电脑上加载图像后，我注意到有一个蓝框，这是显示头像的区域，外面有一个变暗的区域，我想知道如何使用css来实现这样的变暗？ 在此输入图像描述

css

1 个回答

  1. Best Answer

    Radial-gradient使用径向渐变创建变暗效果，其中中心保持透明，边缘变暗

    .image-container {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, transparent 50%, rgba(0, 0, 0, 0.8) 60%);
  pointer-events: none;
}
    <div class="image-container">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnp8C-uj8HjN5jQJOeEvKsGttmhdBm3LXvqw&s" alt="MyDarkenedAvatar" class="image">
  <div class="overlay"></div>
</div>

    是否可以尝试使用 box-shadow 进行类似的操作？

    ...添加 js 创建一个按钮，如屏幕截图所示，-/+ 突出显示区域

    const overlay = document.querySelector('.overlay');
const sizeRange = document.getElementById('size-range');
const decreaseBtn = document.getElementById('decrease-size');
const increaseBtn = document.getElementById('increase-size');

let size = 150; // Начальный размер светлого квадрата

// Функция для обновления размера светлой области
function updateOverlay() {
  size = parseInt(sizeRange.value);
  overlay.style.width = `${size}px`;
  overlay.style.height = `${size}px`;
}

// Уменьшение размера светлой области
decreaseBtn.addEventListener('click', () => {
  if (size > 50) { // Минимальный размер квадрата 50px
    size -= 10;
    sizeRange.value = size;
    updateOverlay();
  }
});

// Увеличение размера светлой области
increaseBtn.addEventListener('click', () => {
  if (size < 300) { // Максимальный размер квадрата 300px
    size += 10;
    sizeRange.value = size;
    updateOverlay();
  }
});

// Обновление размера светлой области с помощью ползунка
sizeRange.addEventListener('input', updateOverlay);
    .image-container {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  margin: 0 auto;
}

.image {
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  background-color: transparent;
  border: 4px solid blue;
  /* Синяя рамка */
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
  /* Эффект затемнения вокруг квадрата */
  pointer-events: none;
  z-index: 2;
}

.controls {
  margin-top: 20px;
  text-align: center;
}

button {
  padding: 10px;
  font-size: 16px;
}

input[type="range"] {
  width: 200px;
  margin: 0 10px;
}
    <div class="image-container">
  <img src="https://isstatic.askoverflow.dev/AiJwu98J.jpg" alt="Image" class="image">
  <div class="overlay"></div>

</div>
<div class="controls">
  <button id="decrease-size">-</button>
  <input type="range" id="size-range" min="50" max="300" step="10" value="150">
  <button id="increase-size">+</button>
</div>

    • 1

相关问题