网页制作css图片

CSS图片基础应用

在网页制作中，CSS可以控制图片的显示方式、尺寸、位置等样式属性。通过CSS，可以实现响应式图片、图片滤镜、边框效果等多种效果。

<img>标签直接插入图片后，通过CSS选择器控制样式：

img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border: 2px solid #ddd;
}

背景图片设置

使用background-image属性为元素添加背景图，配合其他背景属性实现更复杂效果：

.banner {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
}

图片滤镜效果

CSS3的filter属性可以为图片添加视觉效果：

.filter-effect {
  filter: grayscale(50%) blur(2px);
  transition: filter 0.3s ease;
}

.filter-effect:hover {
  filter: none;
}

响应式图片处理

使用媒体查询针对不同屏幕尺寸加载不同图片：

@media (max-width: 768px) {
  .responsive-img {
    background-image: url('mobile-image.jpg');
  }
}

图片布局技巧

结合Flexbox或Grid实现图片画廊布局：

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

.gallery img {
  object-fit: cover;
  width: 100%;
  height: 200px;
}

图片优化技术

使用CSS实现懒加载和占位符效果：

.lazy-img {
  background-color: #f0f0f0;
  background-image: url('placeholder.jpg');
}

.lazy-img.loaded {
  background-image: url('actual-image.jpg');
}