网页设计制作css图片

CSS 图片处理基础方法

设置背景图片
使用 background-image 属性为元素添加背景图，配合 background-size 和 background-position 控制显示效果：

.element {
  background-image: url('image.jpg');
  background-size: cover; /* 或 contain / 具体尺寸 */
  background-position: center;
  background-repeat: no-repeat;
}

响应式图片
通过 max-width: 100% 确保图片适应容器宽度：

img {
  max-width: 100%;
  height: auto; /* 保持比例 */
}

图片样式优化技巧

圆角与阴影
使用 border-radius 和 box-shadow 增强视觉效果：

.img-style {
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

滤镜效果
通过 filter 属性调整图片色调或模糊度：

.img-filter {
  filter: grayscale(50%) blur(2px);
}

高级布局技术

CSS Grid 或 Flexbox 排列图片
利用现代布局方式实现图片画廊：

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

图片遮罩与叠加
结合 ::before 或 ::after 伪元素创建叠加效果：

.overlay {
  position: relative;
}
.overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
}

性能优化建议

懒加载实现
使用 loading="lazy" 属性延迟加载非视口图片：

<img src="image.jpg" loading="lazy" alt="示例">

WebP 格式适配
通过 <picture> 标签提供现代图像格式：

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="后备图片">
</picture>