本文翻译自 Color Formats in CSS，作者：Joshwcomeau。 略有删改
2024年10月21日
在div+css网站布局中，经常要用到背景透明，所在背景的文字内容也会跟着透明，但有时文字需求是不透明的，确实让我们web前端开发者很苦恼，解决这个问题方法有二，第一背景用图片，第二那就是用css来解决。
1.背景透明，文字也透明，以下代码我们常用但不是我们想要的
filter:alpha(opacity=50); //IE滤镜，透明度50%
-moz-opacity:0.5; //Firefox私有，透明度50%
2024年10月21日
我们学习 CSS 背景属性。
假设这里有个 div 容器，宽 400，高 300，默认情况下，这个 div 是没有背景的，或者说它的背景是透明的，我们拿一张图片实验一下就能看得出来，这个 div 在默认情况下，背景是透明的。
2024年10月21日
背景图像是网页设计中至关重要的元素，用于增强视觉效果并增强用户体验。正确使用背景图像可以提高网页的吸引力和专业感。
背景图像的类型
* jpg：对于照片和图像使用。
* png：用于透明图像。
* gif：用于动画图像。
* svg：矢量图像，可以以任何大小缩放，并且在所有设备上显示清晰。
2024年10月21日
效果图:
所有代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 150px;
height: 50px;
border: 1px solid black;
display: flex;
overflow: hidden;
margin-bottom: 20px;
}
.box-filter img {
/*
filter中的drop-shadow，该滤镜可以给图片非透明区域添加投影
-80是因为, 原始图片移动到屏幕外面80px的位置, 它的投影也会跟着走,
因此需要设置-80px, 把投影放到最初的位置
*/
filter: drop-shadow(-80px 0 red);
/* 然后把原始图片移除box外面, 由于设置了超出部分隐藏, 因此看不见 */
transform: translate(80px);
}
</style>
</head>
<body>
<div class="box">
<span>原始图片</span>
<img src="imgs/error-icon.png" alt="" />
</div>
<div class="box box-filter">
<span>使用filter换色</span>
<img src="imgs/error-icon.png" alt="" />
</div>
</body>
</html>
2024年10月21日
本文将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相关属性，制作一些稍微复杂、酷炫的背景。
通过本文，你将会了解到 CSS background 中更为强大的一些用法，并且学会利用 background 相关的一些属性，采用不同的方式，去创造更复杂的背景图案。在这个过程中，你会更好的掌握不同的渐变技巧，更深层次的理解各种不同的渐变。
同时，借助强大的 CSS-Doodle，你将学会如何运用一套规则，快速创建大量不同的随机图案，感受 CSS 的强大，走进 CSS 的美。
2024年10月21日
我们在做PC端项目的时候，常常会碰到透明背景和透明图片的的需求，但是透明度常常有会发生很多问题，特别是背景透明内容不透明，想要兼容所有浏览器实现起来就比较麻烦。
其实平时说的调整透明度，其实是在样式中调整不透明度，如下图：
2024年10月21日
本篇文章结合上一篇所讲到的CSS3技术中有关背景的属性，制作一个实例。小海前端（头条号）带领大家一同实现一个漂亮的信纸背景效果。
2024年10月21日
我相信您已经熟悉颜色的 RGB 和 HEX 表示，因为这是大多数文章/教程在编写 CSS 颜色时使用的，但这些并不是在 CSS 中编写颜色的最佳方法。HEX 和 RGB 很难理解，使颜色变浅/变深或将颜色从红色转换为橙色并不容易。这就是 HSL 的用武之地。HSL 是一种更容易阅读的格式，它使更改颜色的亮度或色调等操作变得简单。
2024年10月21日
作者：前端日志
转发链接：https://mp.weixin.qq.com/s/zoEfqIwfsnAWVO8L7xuUuQ
如果下面这段代码，在浏览器中打开。最终的页面颜色是什么？