当前位置：首页 > CSS

css制作图片

2026-02-26 20:58:00CSS

CSS 制作图片效果

使用CSS可以创建多种图片效果，包括滤镜、遮罩、动画等。以下是几种常见的方法：

滤镜效果 通过filter属性可以快速调整图片的视觉效果。例如，模糊、亮度、对比度等：

img {
  filter: blur(2px) brightness(80%) contrast(120%);
}

遮罩与裁剪 使用clip-path或mask属性实现非矩形图片形状：

.circle-image {
  clip-path: circle(50%);
}

悬停动画 通过transform和transition添加交互效果：

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

纯CSS绘制图形

无需图片文件，仅用CSS可绘制简单图形：

基本形状 利用border和border-radius创建圆形、三角形等：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(to right, #ff8a00, #da1b60);
}

复杂图形 通过伪元素和box-shadow组合实现：

.heart {
  position: relative;
  width: 50px;
  height: 50px;
}
.heart::before, .heart::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 40px;
  background: red;
  border-radius: 25px 25px 0 0;
}
.heart::before {
  transform: rotate(-45deg);
  left: 25px;
}
.heart::after {
  transform: rotate(45deg);
  left: 0;
}

响应式图片处理

确保图片在不同设备上适配：

自适应大小

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

艺术方向切换 配合<picture>标签使用：

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="响应式图片">
</picture>

性能优化技巧

懒加载

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

WebP格式支持

.optimized-bg {
  background-image: url("image.webp");
  background-image: image-set("image.webp" type("image/webp"), "image.jpg" type("image/jpeg"));
}

css制作图片