使用 CSS 实现古董/棕褐色照片滤镜

Question

我需要帮助使用纯 CSS 实现古董照片滤镜。我试图仅实现颜色，而不是像素化或破损边缘效果。我知道 CSS 无法实现像素化和撕裂，但我希望颜色/对比度/饱和度等尽可能接近。这是目标：

到目前为止我有这个代码：

filter: sepia(.75) contrast(.75) brightness(1.25) saturate(1.4);

我的另一个问题是我的显示器的色彩准确度不太好，所以我希望拥有更好校准显示器的人可以帮助实现这一目标。

Answer 1

嗯，尝试一下这个解决方案，2 层滤镜和径向背景渐变。继续点击“运行代码片段”以加载不同的图像

我已经编辑了这个答案大约10次了。浏览各种不同滤镜组合的修订版等，我个人认为当前的迭代是最好的，它保持相同的黑暗度，并且不会完全洗白明亮区域，它可能远远没有复制过滤器例如，我认为迭代 5 或 6 最接近样本的颜色

/* IGNORE THESE SYLES */
body { margin: 0 } section { display: flex; gap: 5px; padding: 5px } .media > * { display: block; max-width: 100% }



/* CSS FOR ANSWER BELOW */
.sepiaEffect {
  background: radial-gradient(circle at center, rgb(205, 165, 105), rgb(100, 80, 60) 84%);
  filter: contrast(132%) saturate(180%);
}

.sepiaEffect > * {
  filter: opacity(60%) saturate(0%) sepia(30%);
}

<section>
<div class="media">
  <img src="https://picsum.photos/1200/900">
</div>
<div class="media sepiaEffect">
  <img src="https://picsum.photos/1200/900">
</div>
</section>