css背景色使用渐变色_用CSS进行棕褐色照片

css背景色使用渐变色

Previously I’ve discussed the concept of CSS filters, and stepped you through converting an image to black and white using CSS, without needing to create a new version. We can use the same approach to sepia-tone an image, for an old-timey photographic effect.

之前，我已经讨论了CSS过滤器的概念 ，并逐步引导您使用CSS将图像转换为黑白图像 ，而无需创建新版本。 我们可以使用相同的方法对图像进行棕褐色调，以获得老式的摄影效果。

The HTML for this example is an image with an attached class:

此示例HTML是带有附加类的图像：

<img src="steampunk-man.jpg" class="sepia" 
alt="Gentleman wearing a steampunk gasmask and top hat" >

Using CSS filters is the easiest approach:

使用CSS过滤器是最简单的方法：

img.sepia {
	filter: sepia(100%);
}

That covers all modern browsers on desktop and mobile. To cover versions of Firefox prior to v35, we write a separate SVG filter:

这涵盖了台式机和移动设备上的所有现代浏览器。 为了涵盖v35之前的Firefox版本，我们编写了一个单独的SVG过滤器：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<filter id="old-timey">
		<feColorMatrix values="0.14 0.45 0.05 0 0
			0.12 0.39 0.04 0 0    
			0.08 0.28 0.03 0 0
			0 0 0 1 0" />
		</filter>
</svg>

Saving this code in a file with the name sepia.svg allows us to reference it in our CSS. At the same time, I'll write in support for other older browser versions:

将此代码保存在名为sepia.svg的文件中，使我们可以在CSS中引用它。 同时，我将编写对其他旧版本浏览器的支持：

img.sepia {
	filter: url(sepia.svg#old-timey);
	-webkit-filter: sepia(1);
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
	background-color: #5E2612;
	filter: alpha(opacity = 50);
	zoom:1;
}

Unfortunately there’s no explicit sepia filter for Internet Explorer, so we must fake it by placing a sepia color behind the image and making the image slightly transparent, restricting these changes to IE 9 and earlier (as I've discussed in previous articles, IE 10 and 11 are currently in an impossible situation regarding CSS filters):

不幸的是，Internet Explorer没有明确的棕褐色过滤器，因此我们必须通过在图像后面放置棕褐色并使图像稍微透明来伪造它，从而将这些更改限制为IE 9和更早版本(如我在先前文章IE 10中所讨论的那样)和11目前在CSS过滤器方面处于不可能的情况)：

img.sepia {
	filter: url(sepia.svg#old-timey);
	-webkit-filter: sepia(1);
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
	background-color: #5E2612;
	filter: alpha(opacity = 50);
	zoom:1;
}

Next, we’ll look at blurring images.

接下来，我们来看模糊的图像 。

翻译自: https://thenewcode.com/533/Sepia-toning-photographs-with-CSS

css背景色使用渐变色