gif混合模式去背景_混合模式带来更好的背景

gif混合模式去背景

Overlays on top of background images, often used to contain and provide contrast for text, have traditionally been limited a single color, sometimes combined with opacity. After a while, this becomes staid, restrictive and a little boring. For designers, CSS blend modes offer many more options, while still allowing backwards compatibility with browsers that don’t yet support blend modes (at this stage, Internet Explorer).

传统上， 背景图片之上的叠加层通常用于包含文本并为文本提供对比度，但传统上仅限于一种颜色，有时还与不透明性结合使用。 过了一会儿，这变得僵硬，限制性和无聊。 对于设计人员而言， CSS混合模式提供了更多选项，同时仍允许与尚不支持混合模式的浏览器向后兼容(在此阶段为Internet Explorer)。

First, let’s look at the basic CSS:

首先，让我们看一下基本CSS：

body {
	background-image:
	linear-gradient(90deg, rgba(197,0,0,.9) 66.6%, transparent 66.7%),
	url(spring-flowers.jpg);
	background-size: contain;
	background-blend-mode: normal;
	color: #fff;
}

To create some contrast between the image and the text that will go above it, I’ve placed a linear gradient on top of the background image. The gradient goes ⅔rd’s of the way across the page in a slightly translucent color before changing to completely transparent.

为了在图像和上方的文本之间产生某种对比，我在背景图像的顶部放置了线性渐变 。 在更改为完全透明之前，渐变会以稍微半透明的颜色贯穿页面。

To enhance the contrast, the text has a subtle text-shadow applied:

为了增强对比度，文本应用了微妙的text-shadow ：

blockquote {
  text-shadow: 3px 2px 3px rgba(0,0,0,0.3);
}

In traditional web design, the only significant change possible at this stage is changing the alpha level of the color used in the gradient to provide it with more opacity. But blend modes provide many more options, which you can explore using the simple UI at the top of this article.

在传统的网页设计中，此阶段唯一可能发生的重大变化是更改渐变中使用的颜色的alpha等级，以使其具有更高的不透明度。 但是混合模式提供了更多选项，您可以使用本文顶部的简单UI进行探索。

I’ve used only the options I think work best with white text on an image with fairly high contrast: these are not all the possible blend modes, and your choices will be different for images that are low contrast with dark text on top. The effects also change as the color of the gradient changes, so you are encouraged to experiment with each one.

我只使用了我认为最适合对比度较高的图像上的白色文本的选项：并非所有可能的混合模式，对于对比度较低，顶部为深色文本的图像，您的选择将有所不同。 效果也会随着渐变颜色的变化而变化，因此建议您尝试每一种。

Whatever you choose, it’s important to make an acceptable contrast with the image and text while background-blend-mode: normal is in effect, since that is what IE users will see. Other users will see the enhanced version: as a suggestion, try luminosity to start, which alters the CSS to include:

无论选择什么，在background-blend-mode: normal时与图像和文本形成可接受的对比度很重要background-blend-mode: normal有效，因为这是IE用户看到的。 其他用户将看到增强版本：作为建议，尝试启动luminosity ，这会更改CSS包括：

body { 
    background-blend-mode: luminosity;
}

…and creates an effect that might be described as “darkened cel shader”.

…并创建一种可能称为“暗色cel着色器”的效果。

This same technique can be used with any element that contains text with a background image to create uniquely enhanced contrast effects.

可以对包含文本和背景图像的任何元素使用相同的技术，以创建独特的增强对比度效果。

翻译自: https://thenewcode.com/1035/Better-Backgrounds-with-Blend-Modes

gif混合模式去背景