制作图片css

使用CSS制作图片效果

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

添加边框和圆角

img {
  border: 3px solid #ccc;
  border-radius: 10px;
}

应用阴影效果

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

使用滤镜

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

响应式图片设置

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

自动调整大小

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

设置不同分辨率图片

<picture>
  <source media="(min-width: 768px)" srcset="large.jpg">
  <source media="(min-width: 480px)" srcset="medium.jpg">
  <img src="small.jpg" alt="示例图片">
</picture>

图片悬停效果

为图片添加交互效果：

缩放效果

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

叠加效果

.image-container {
  position: relative;
}
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.image-container:hover .image-overlay {
  opacity: 1;
}

使用CSS创建纯色图片

可以用CSS创建简单的图形：

创建圆形

.circle {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
}

创建三角形

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid green;
}

图片加载优化

懒加载

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="示例">

模糊加载效果

img {
  filter: blur(5px);
  transition: filter 0.5s;
}
img.loaded {
  filter: blur(0);
}

这些CSS技巧可以帮助增强网页中图片的视觉效果和用户体验。根据具体需求选择合适的样式组合。