网页制作css图片

CSS 图片样式设置

使用 CSS 可以轻松控制网页中图片的样式和布局。以下是几种常见的图片样式设置方法：

设置图片尺寸

img {
  width: 200px;
  height: auto;
}

图片圆角效果

.rounded-img {
  border-radius: 50%;
}

图片阴影效果

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

图片布局技巧

图片居中显示

.center-img {
  display: block;
  margin: 0 auto;
}

图片响应式设计

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

图片滤镜效果

黑白滤镜

.grayscale-img {
  filter: grayscale(100%);
}

模糊效果

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

图片悬停效果

放大效果

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

透明度变化

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

背景图片设置

固定背景图

.bg-container {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

渐变叠加背景

.gradient-overlay {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('image.jpg');
}

这些 CSS 技巧可以帮助创建更具视觉吸引力的网页图片效果，根据实际需求选择合适的样式组合。