制作图片css

使用CSS制作图片效果

CSS可以用于为图片添加各种视觉效果，如边框、阴影、滤镜等。以下是一些常见的方法：

添加边框和圆角

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

添加阴影效果

img {
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

图片滤镜效果

CSS滤镜可以改变图片的外观：

灰度效果

img {
  filter: grayscale(100%);
}

模糊效果

img {
  filter: blur(2px);
}

图片悬停效果

为图片添加交互效果：

放大效果

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

透明度变化

img {
  opacity: 0.8;
  transition: opacity 0.3s;
}
img:hover {
  opacity: 1;
}

响应式图片

确保图片在不同设备上正确显示：

自适应宽度

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

根据屏幕大小调整

@media (max-width: 600px) {
  img {
    width: 100%;
  }
}

图片蒙版和叠加

使用CSS创建更复杂的图片效果：

叠加文字

.image-container {
  position: relative;
}
.image-text {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  background-color: rgba(0,0,0,0.5);
  padding: 5px;
}

渐变叠加

.image-overlay {
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));
}

这些CSS技巧可以帮助创建各种图片效果，根据具体需求选择合适的样式组合。