网页制作css图片
CSS 图片处理基础
在网页设计中，CSS 图片处理是提升视觉效果的关键部分。通过 CSS 可以控制图片的尺寸、位置、边框、阴影等样式属性。
设置图片尺寸
使用 width 和 height 属性调整图片大小。建议只设置一个维度（如 width: 100%）以保持比例：
img {
width: 200px;
height: auto; /* 保持宽高比 */
}圆角与边框
通过 border-radius 实现圆角效果，border 添加边框：
img.rounded {
border-radius: 50%;
border: 3px solid #ccc;
}背景图片控制
CSS 的 background-image 属性可用于设置元素背景图，配合其他属性实现更复杂效果。
基础背景设置
div.hero {
background-image: url("image.jpg");
background-size: cover; /* 覆盖整个容器 */
background-position: center;
}背景重复与固定 禁止重复平铺或固定背景图位置：
body {
background-image: url("pattern.png");
background-repeat: no-repeat;
background-attachment: fixed; /* 滚动时固定 */
}响应式图片处理
适应不同屏幕尺寸是网页设计的核心需求。
根据设备宽度调整图片 使用媒体查询针对不同屏幕尺寸加载不同图片：
@media (max-width: 600px) {
img.responsive {
width: 100%;
}
}图片懒加载优化
通过 loading="lazy" 属性延迟加载非首屏图片：
<img src="image.jpg" loading="lazy" alt="示例">图片滤镜与混合模式
CSS3 提供了强大的图片视觉效果处理功能。
应用滤镜效果
img.filtered {
filter: grayscale(80%) blur(1px);
}混合模式叠加
div.blend {
background-image: url("overlay.png");
background-blend-mode: multiply;
}性能优化技巧
使用现代图片格式 优先选择 WebP 格式以减小文件体积：
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="后备图片">
</picture>CSS Sprite 技术
合并多个小图标为一张大图，通过 background-position 定位：
.icon {
background: url("sprite.png") no-repeat;
width: 32px;
height: 32px;
}
.icon-home {
background-position: 0 0;
}
