当前位置：首页 > CSS

css图片制作教程

2026-03-12 01:43:46CSS

使用CSS制作图片效果

CSS可以用于创建各种图片效果，包括滤镜、遮罩、形状裁剪等。以下是一些常见的CSS图片处理技术：

滤镜效果 通过filter属性可以快速为图片添加视觉效果：

img {
  filter: grayscale(100%); /* 灰度效果 */
  filter: blur(5px); /* 模糊效果 */
  filter: brightness(150%); /* 亮度调整 */
  filter: contrast(200%); /* 对比度增强 */
}

形状裁剪 使用clip-path或shape-outside创建非矩形图片：

.circle-img {
  clip-path: circle(50% at 50% 50%);
  shape-outside: circle(50%);
}

纯CSS绘制图形

无需图片文件，仅用CSS可以创建各种图形元素：

基本形状

css图片制作教程

.square {
  width: 100px;
  height: 100px;
  background: #3498db;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #e74c3c;
}

复杂图形 使用伪元素和变换创建更复杂的形状：

.heart {
  position: relative;
  width: 100px;
  height: 90px;
}
.heart:before, .heart:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
}
.heart:before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

CSS图片遮罩技术

渐变遮罩

.masked-img {
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

SVG遮罩

css图片制作教程

svg-mask {
  mask: url(#mask);
  -webkit-mask: url(#mask);
}

响应式图片处理

适应不同屏幕尺寸

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

艺术方向 使用picture元素配合CSS实现：

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

CSS图片动画效果

悬停效果

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

关键帧动画

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.animated-img {
  animation: pulse 2s infinite;
}

这些技术可以单独使用或组合使用，创造出丰富的视觉效果，减少对图片文件的依赖，提高页面加载性能。