css网页制作作品图片

使用CSS添加图片

在网页制作中，通过CSS可以灵活地控制图片的样式和布局。以下是一些常见的方法：

设置背景图片

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

调整图片尺寸

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

图片圆角效果

img {
  border-radius: 10px;
}

图片悬停效果

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

响应式图片设计

确保图片在不同设备上都能良好显示：

根据屏幕大小调整图片

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

使用srcset属性

<img src="small.jpg" 
     srcset="medium.jpg 1000w, large.jpg 2000w" 
     alt="Responsive image">

图片布局技巧

图片网格布局

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

图片居中显示

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

图片滤镜效果

img {
  filter: grayscale(50%) brightness(90%);
}

图片加载优化

懒加载实现

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

使用WebP格式

.element {
  background-image: url('image.webp');
  background-image: url('image.jpg');
}

这些CSS技巧可以帮助创建美观且功能性的图片展示效果，同时确保良好的用户体验和页面性能。