使用 CSS 混合模式创建令人惊叹的视觉效果的实用指南-css教程-PHP中文网

A Practical Guide to Creating Stunning Visual Effects with CSS Blend-Modes

大纲

简介
了解混合模式原色属性
混合模式 - 混合混合模式和背景混合模式
混合模式的实际应用
有效使用混合模式的技巧
结论

混合模式是 CSS 数据类型，描述两个或多个 HTML 元素重叠后的结果颜色。借助 CSS 滤镜属性，混合模式使开发人员只需几行 CSS 即可创建丰富、动态的类似 Photoshop 的视觉效果。作为开发人员，它们为您提供了一种强大的方法来增强网站设计的外观和感觉，并使您的网站变得出色和专业。
CSS 为开发人员提供了两种混合模式属性：混合混合模式和背景混合模式。 mix-blend-mode 属性定义元素的内容颜色应如何与元素父元素的其他内容混合。背景混合模式的作用相同，只不过它的重点是将元素的颜色与其背景混合。
CSS 为开发人员提供了 16 个关键字和 5 个用于混合模式属性的全局值，每个值都对您应用的元素具有独特的视觉效果。本指南将帮助您深入了解混合模式，解释每个关键字和全局值、它们的实际应用以及有效使用它们的技巧。

了解混合模式

混合模式用于将元素的内容和背景的亮度、对比度、饱和度和色调调整为相邻元素的内容和背景。为了深入了解混合模式，您需要从图形设计的角度来了解几乎在每个混合模式属性的所有定义中都会遇到的 4 个主要术语。

亮度：屏幕每个像素发出的光的强度。为了让眼睛感知物体的颜色，物体需要暴露在光线下。暴露在光线下时，物体会吸收一些光并反射其余的光。反射光的强度是物体光度的度量。您的眼睛将反射光强度感知为物体颜色的亮度，因此，光度基本上就是您的眼睛感知物体颜色的亮度。亮度不仅取决于您的眼睛感知物体颜色的亮度；还取决于您的眼睛感知物体颜色的亮度。它还受到其他 2 个属性的影响：饱和度和色调。
饱和度：此设计属性的范围为 0 - 100%，定义纯色的显示效果。除了一些其他变化之外，设计师还通过添加白色和黑色（灰色）来调低颜色，以实现他们试图重新创建的图像的特定颜色。如果删除应用于颜色的所有“其他更改”，并且其他颜色属性保持不变，则修改后的颜色中的灰色量定义了其不饱和程度。然而，在颜色中完全没有灰色的情况下，颜色的饱和度百分比为 100，这意味着该颜色是绝对纯净的。由于任何低于 100 的饱和度百分比都表明特定颜色已被调色，因此颜色的亮度也会因颜色中的杂质（灰色）而改变。
色调：简单来说，它是颜色最纯粹的表现。不要将它与饱和度属性混淆。在纯色中添加任何灰色都会将其饱和度百分比从 100 降低。颜色在饱和之前的纯形式是“色调”。虽然其他颜色属性保持不变，但色调是一种没有色调（添加任何程度的白色）或阴影（添加任何程度的黑色）的颜色。就像篡改颜色的饱和度会扰乱其亮度一样，篡改色相也会产生相同的效果。
对比度：在这种情况下，它是两种或多种色调之间的差异。它赋予每种颜色独特的属性，使人们能够轻松区分颜色。

现在已经正确剖析了原色属性，是时候了解它们如何与每个混合模式属性相关并赋予其独特的效果了。

混合模式 - 混合混合模式和背景混合模式

CSS 混合模式属性对于控制透明和半透明元素与底层内容的混合行为特别有用。此外，它们还可以应用于不透明元素以产生通常吸引人的效果。混合模式使 Web 开发人员能够通过调整亮度、混合 2 种或更多颜色、增加 2 种或更多重叠内容的对比度以及显示重叠元素的前景色和背景色之间的差异来操纵颜色组合方式，从而产生各种效果。设计效果。
mix-blend-mode 属性定义元素的内容应如何与同一父级和背景的其他内容混合，而 background-blend-mode 定义元素的背景图像应如何与同一元素和背景中的其他背景图像混合颜色。 background-blend-mode 属性适用于至少具有一张背景图像的元素，而 mix-blend-mode 属性适用于具有或不具有背景图像的任何元素。这两个属性共享 16 个关键字和 5 个用于定义样式的全局值。

正常：正常是默认值。混合模式属性为正常的元素没有可见的变化。这就像将一张不透明的纸放在另一张不透明的纸上；您只能看到最上面纸张的颜色。
乘法：顾名思义，结果颜色是前景色和背景色相乘得到的效果。这类似于将一个半透明塑料袋叠加在另一个上。最上面元素的颜色越浅，基本元素的颜色就越显露出来。
屏幕：前景色和背景色反转，并对结果应用乘法效果，最终再次反转。对于此效果，前景色越深，背景色就越能显现出来。
叠加：此效果根据背景颜色将自身描绘为叠加或屏幕效果。背景颜色较深则有叠加效果，背景颜色较亮则有屏幕效果。
变亮：所得颜色相当于两种颜色元素中较亮的颜色。
变暗：所得颜色相当于两种颜色元素中较暗的颜色。
颜色减淡：淡化前景色（或背景图像）以反映背景色。
颜色加深：颜色减淡的逆过程。它在前景色（或背景图像）中反映了高对比度的背景色。
强光：与叠加类似，但交换了图层。它可以提供倍增或屏幕效果，但与叠加不同，它取决于前景色。如果前景色较暗，则会产生乘法效果，如果前景色较亮，则会产生屏幕效果。
柔光：与硬光类似，但更柔和。它使用颜色加深/颜色减淡而不是乘法/屏幕。
差异：通过从浅色元素中减去深色元素得到最终效果。
排除：与差异类似，但对比更柔和。
色调：由前景色的色调和背景色的饱和度和亮度组成。
饱和度：与色调类似，但角色相反。前景色的饱和度和背景色的色调和亮度混合以获得最终效果。
亮度：也与色调相似，但角色相反。前景色的亮度和背景色的色调和饱和度混合以获得最终效果。
颜色：对于此效果，前景色的色调和饱和度以及背景色的亮度混合以产生最终效果。

混合模式的实际应用

创建动态图像叠加

混合模式可用于创建迷人的图像叠加，为您的网页设计增添深度和趣味。以下是如何在图像上创建颜色叠加的示例：

.image-container {
      position: relative;
      width: 100%;
      height: 400px;
    }

    .image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 255, 0.5); /* Blue overlay */
      mix-blend-mode: multiply;
    }

登录后复制

此 CSS 将在图像顶部创建蓝色叠加层，赋予其喜怒无常的电影效果。

增强版式

混合模式可以使文本在复杂的背景下脱颖而出。以下是如何使用混合模式来确保文本可读性：

.text-overlay {
      color: white;
      mix-blend-mode: difference;
    }

登录后复制

这将通过根据背景反转文本颜色，使文本在浅色和深色背景下都可见。

设计引人注目的背景

通过混合多个背景图像创建独特的背景效果：

    .blended-background {
      background-image: 
        url('texture.jpg'),
        linear-gradient(to right, #ff0000, #00ff00);
      background-blend-mode: overlay;
    }

登录后复制

这将纹理图像与渐变相结合，创建丰富的纹理背景。

Artistic Image Manipulation

Use blend modes to apply artistic effects to images without the need for image editing software:

   .artistic-image {
      background-image: url('portrait.jpg');
      background-color: #ff00ff; /* Magenta */
      background-blend-mode: color;
    }

登录后复制

This applies a colourization effect to the image, similar to duotone effects in print design.

Tips for Using Blend Modes Effectively

Start Simple: Begin with basic blend modes like multiply or screen before moving on to more complex ones.
Consider Accessibility: Ensure that text remains readable when using blend modes. Always test your designs with different colour blindness simulations.
Test Across Browsers: Not all browsers support all blend modes equally. Always test your designs in multiple browsers and have fallbacks ready.
Be Mindful of Performance: Overusing blend modes, especially on large images or backgrounds, can impact page performance. Use them judiciously.
Combine with Other CSS Properties: Blend modes work well with opacity, filters, and animations to create even more interesting effects.
Use with SVGs: Blend modes can create fascinating effects when applied to SVG elements.
Experiment: Don't be afraid to try unexpected combinations. Sometimes the most interesting effects come from experimentation.
Consider Dark Mode: If your site has a dark mode, remember that blend modes might behave differently on dark backgrounds.
Document Your Work: When using complex blend mode combinations, leave comments in your CSS to explain the intended effect.
Use Dev Tools: Browser dev tools are invaluable for tweaking real-time blend modes. Use them to fine-tune your effects.

Browser Compatibility

While most modern browsers support blend modes, there are still some considerations:

Internet Explorer does not support blend modes at all.
Some older versions of browsers may have limited support.
Mobile browsers generally have good support but always test on actual devices.

For up-to-date compatibility information, check Can I Use.

Performance Considerations

Blend modes are generally performant, but can cause issues if overused:

Applying blend modes to large areas or many elements can slow down rendering.
Animated blend modes can be particularly resource-intensive.
Consider using will-change: background-blend-mode; or will-change: mix-blend-mode; for frequently changing blend modes, but use sparingly as it can consume memory.

Conclusion

CSS blend modes offer web developers and designers a powerful tool to create stunning visual effects with minimal effort. By understanding the principles behind blend modes and how they interact with colour properties like luminosity, saturation, and hue, you can create designs previously only possible with image editing software.
From enhancing typography and creating dynamic image overlays to designing striking backgrounds and manipulating images artistically, blend modes open up a world of creative possibilities. Remember to use them judiciously, always keeping in mind accessibility, performance, and cross-browser compatibility.
As web design continues to evolve, mastering blend modes will give you an edge in creating unique, eye-catching designs that stand out in the digital landscape. Don't be afraid to experiment and push the boundaries of what's possible with CSS – you might discover exciting new techniques that elevate your web design to the next level.
Lastly, here's a suggested "Resources" section to round out the article:

Resources for Further Learning

To deepen your understanding and skills with CSS blend modes, check out these valuable resources:

MDN Web Docs on Blend Modes - Comprehensive documentation on all blend mode properties.
CSS Tricks - CSS Blend Modes - A practical guide with examples and explanations.
Codrops CSS Reference - Blend Modes - Interactive examples of different blend modes.
Can I Use - CSS Blend Modes - Up-to-date browser compatibility information.
Adobe Color - A tool for creating colour schemes that work well with blend modes.
Blend - CSS Playground - An interactive tool to experiment with different blend modes.
CSS Blend Mode Generator - A CodePen demo to generate blend mode effects.

These resources will help you explore the full potential of CSS blend modes and inspire you to create unique visual effects in your web projects.

Cover photo by Hitesh Choudhary

以上是使用 CSS 混合模式创建令人惊叹的视觉效果的实用指南的详细内容。更多信息请关注PHP中文网其他相关文章！