制作图片css

使用CSS制作图片效果

CSS可以用于为图片添加各种视觉效果，包括边框、阴影、滤镜、动画等。以下是一些常见的CSS图片处理技巧：

边框和圆角

img {
  border: 5px solid #333;
  border-radius: 10px;
}

这段代码会给图片添加5像素宽的灰色边框和10像素的圆角。

阴影效果

img {
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

这会在图片右下角添加一个柔和的阴影效果。

滤镜效果

img {
  filter: grayscale(50%) blur(1px);
}

这个滤镜会将图片变为50%灰度并添加轻微模糊效果。

悬停效果

img {
  transition: transform 0.3s ease;
}
img:hover {
  transform: scale(1.05);
}

当鼠标悬停在图片上时，图片会轻微放大。

响应式图片

img {
  max-width: 100%;
  height: auto;
}

确保图片在不同设备上都能正确缩放。

图片遮罩

img {
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

创建一个从底部逐渐消失的遮罩效果。

混合模式

img {
  mix-blend-mode: multiply;
}

设置图片与其他元素的混合模式。

对象适配

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

控制图片在固定尺寸容器中的显示方式。

背景图片

div {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

使用CSS将图片设置为元素的背景。

动画效果

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
img {
  animation: fadeIn 2s ease-in;
}

为图片添加淡入动画效果。