当前位置：首页 > CSS

css油画制作

2026-02-27 06:59:21CSS

使用CSS创建油画效果

通过CSS的滤镜和混合模式可以模拟油画风格的视觉效果。以下是几种实现方法：

方法一：使用滤镜组合

.filter-oil-painting {
  filter: blur(1px) contrast(1.5) saturate(1.2);
  mix-blend-mode: multiply;
  background-blend-mode: overlay;
}

这种方法通过轻微模糊增强色彩对比度，配合混合模式创建颜料堆积感。

方法二：画布纹理叠加

.canvas-texture {
  background-image: 
    url('canvas-texture.jpg'),
    linear-gradient(to bottom, transparent, rgba(0,0,0,0.1));
  background-blend-mode: overlay;
  filter: sepia(30%);
}

添加画布纹理背景配合渐变叠加，sepia滤镜增加复古感。

方法三：SVG滤镜组合

<svg>
  <filter id="oilPaint">
    <feGaussianBlur stdDeviation="2"/>
    <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10"/>
  </filter>
</svg>

CSS中引用：

css油画制作

.svg-filter {
  filter: url(#oilPaint);
}

关键参数调整技巧

模糊半径控制在1-3px产生笔触效果
contrast值1.2-1.8增强颜料质感
使用hue-rotate(10deg)微调色相
配合box-shadow创建立体笔触

实际应用示例

.impressionist-effect {
  background: url(painting.jpg);
  filter: 
    blur(0.8px) 
    contrast(1.6) 
    drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
  mix-blend-mode: hard-light;
  opacity: 0.9;
}

这种方法适合将普通照片转化为印象派风格，关键是通过适度的模糊和对比度调整保留细节同时创造手绘感。