我可以使用CSS字体进行淘汰/穿透透明度吗？
Roc*_*och 8 css transparency opacity
我想知道是否有任何方法可以对文本应用100%透明度,以便我们可以在文本中的字符内看到页面的背景图片.
即想象我<div>有一个白色背景和背景图像<body>.我想将文本设置在内部,<div>以便<body>可以通过文本看到背景图像,尽管白色背景<div>.
我可以使用倒置字体,但如果有的话,我希望有更好的方法.
Ana*_*Ana 17
2023 年的情况 - 简而言之，我们有以下选择：
\n- \n
- 纯 CSS ：使用/混合模式时
mix-blend-mode仅限于完全white/背景，或者在使用/时最多有比背景图像任何像素的相应通道具有更高/更低值的所有 3 个通道blackpscreenmultiplybackgroundpbodylightendarken\n - 纯 CSS
background-clip: text：虽然这已经从一项非标准功能演变为标准功能，并且支持也得到了极大改善，但它仍然受到与背景对齐的限制body+由于 Firefox 中的错误行为而涉及嵌套 \n - 使用 SVG
filter使文本像素透明：一直到 IE9 都有出色的支持，并且没有太多限制 \n
详细地：
\n纯CSS：mix-blend-mode
\n这很简单，相关代码就是：
\np {\n background: #fff;\n color: #000;\n mix-blend-mode: screen\n}\n其他的只是无关的布局/美化绒毛，不影响获得我们想要的效果。
\nwhite请注意，只有当您有完整的背景（可能有也可能没有半透明）时，下面的代码片段才能正常工作。
p {\n background: #fff;\n color: #000;\n mix-blend-mode: screen\n}\nhtml, body { display: grid }\n\nhtml { height: 100% }\n\nbody {\n background: url(https://images.unsplash.com/photo-1506383631675-0b110111327b?w=1400) 50%/ cover\n}\n\np {\n place-self: center;\n padding: 0 0.125em;\n width: min-content;\n background: #fff;\n font: 900 clamp(1.25em, 25vmin, 25em)/ 1.125 sans-serif;\n text-align: center;\n mix-blend-mode: screen\n}这里发生了什么事？
\n混合是当我们有两个层一个在另一个之上时应用的操作，基于每个像素，并且在某些情况下（我们在这里关心的那些）基于每个通道。
\n
对于这种效果，我们可能考虑的任何混合模式的作用如下：获取它所应用的元素的每个像素（在本p例中）以及后面的相应像素（body在本例中的背景图像）情况）并执行涉及两个相应像素的百分比 RGB 通道值的十进制表示的计算。
混合模式如何screen工作
\n在混合模式的情况下screen，如果C\xe2\x82\x81是顶层像素的通用通道（R，G或B，没关系，公式是相同的）并且C\xe2\ x82\x80是底层对应像素的通用通道值，公式如下：
1 - (1 - C\xe2\x82\x81)\xc2\xb7(1 - C\xe2\x82\x80)\n假设元素的第 i列像素和第 j行像素之间的交集处的像素p为 1 black，对应于实际文本（即rgb(0%, 0%, 0%)处的所有三个通道值0%）。假设body背景图像中相应的像素是rgb(41%, 55%, 91%)一种灰蓝色。
那么混合模式操作后该像素的 RGB 通道结果为screen：
1 - (1 - 0)\xc2\xb7(1 - .41) = 1 - 1\xc2\xb7.59 = 1 - .59 = .41\n1 - (1 - 0)\xc2\xb7(1 - .55) = 1 - 1\xc2\xb7.45 = 1 - .45 = .55\n1 - (1 - 0)\xc2\xb7(1 - .91) = 1 - 1\xc2\xb7.09 = 1 - .09 = .91\n也就是说，通道值与背景图像中的像素完全相同body！
一般来说，当两层中的一层中的一个像素是black并且我们使用screen混合模式时，那么混合的结果是另一层中的像素的RGB值（而不是具有该像素的black像素）。
这是因为当我们有一个black像素时，它的所有三个通道都为0%，0以十进制表示，因此 或1 - C\xe2\x82\x81部分1 - C\xe2\x82\x80（取决于像素位于两层中的哪一层black）为1 - 0 = 1，从而使整个乘积部分等于另一个因子，是另一层像素的通道值的补集。然后对补码( 1 - (1 - a) = a)求反，得到另一层通道的初始值。
现在假设元素的第 i列像素和第 j行像素之间的交点处的像素p为white1，对应于background（即rgb(100%, 100%, 100%)，所有三个通道值均在 处达到最大值100%）。假设背景图像中的相应像素相同的灰蓝色rgb(41%, 55%, 91%)。
那么混合模式操作后该像素的 RGB 通道结果为screen：
1 - (1 - 1)\xc2\xb7(1 - .41) = 1 - 0\xc2\xb7.59 = 1 - 0 = 1\n1 - (1 - 1)\xc2\xb7(1 - .55) = 1 - 0\xc2\xb7.45 = 1 - 0 = 1\n1 - (1 - 1)\xc2\xb7(1 - .91) = 1 - 0\xc2\xb7.09 = 1 - 0 = 1\n即，rgb(100%, 100%, 100%)或者white！
一般来说，当两层之一中的像素为white且我们使用screen混合模式时，则混合的结果也是white。
这是因为当我们有一个white像素时，它的所有三个通道都在 处达到最大值100%（1以十进制表示），因此 或1 - C\xe2\x82\x81部分1 - C\xe2\x82\x80（取决于像素位于两层中的哪一层white）为1 - 1 = 0，从而使整个乘积部分0和最终结果1（或100%）。所有三个通道值均达到最大值100%，这意味着white。
screen方法的突破点
\n这也意味着对于background我们的任何p不完全的情况white，这种方法都会失败。
假设我们的p背景是桃色的，与深色背景相比仍然很亮，即rgb(100%, 86%, 73%)。替换我们的公式（并考虑相应背景像素的相同 RGB 值），我们对三个通道有以下内容：
1 - (1 - 1)\xc2\xb7(1 - .41) = 1 - 0\xc2\xb7.59 = 1 - 0 = 1\n1 - (1 - .86)\xc2\xb7(1 - .55) = 1 - .14\xc2\xb7.45 = 1 - .063 = .937\n1 - (1 - .73)\xc2\xb7(1 - .91) = 1 - .17\xc2\xb7.09 = 1 - .0153 = .9847\n所以结果是，这与我们开始的rgb(100%, 93.7%, 98.47%)peachpuff 不同， 。它们都是微红色且非常亮，但它们是不同的，这种差异取决于下面背景的 RGB 通道。backgroundrgb(100%, 86%, 73%)body
下面的屏幕截图说明了我们遇到的这个问题，如果我们想要任何background不完全white适合我们的p：
这款桃酥非常轻，非常适合我们的white选择。越黑，问题越明显。这是在行动：backgroundpbackgroundcrimson
哎呀！
\nlighten- 也许是另一个可以接受的选择？
\n现在，如果背景图像非常暗（只是暗，但与我们想要的body通道相同），我们可能会将混合模式更改为。backgroundplighten
例如，如下所示，body背景图像只是深绿色，而我们已经设置background: lightgreen了p：
<p contenteditable>Hello, world!</p>1 - (1 - C\xe2\x82\x81)\xc2\xb7(1 - C\xe2\x82\x80)\n如何lighten工作
\n在这种情况下lighten，如果 C\xe2\x82\x81 是顶层像素和 C 的通用通道（R、G 或 B，同样，没关系，公式是相同的） \xe2\x82\x80 是底层对应像素的通用通道值，公式如下：
max(C\xe2\x82\x81, C\xe2\x82\x80)\n真的，就是这样！
\n假设元素的第 i列像素和第 j行像素之间的交集处的像素p为 1 black，对应于实际文本（即rgb(0%, 0%, 0%)处的所有三个通道值0%）。假设body背景图像中对应的像素是rgb(4%, 13%, 6%)非常深的绿色。
然后该像素的 RGB 通道lighten：
max(0, .04) = .04\nmax(0, .13) = .13\nmax(0, .06) = .06\n同样，这与图像中像素的通道值完全相同。body背景图像中的像素完全相同的通道值！
这是因为当我们有一个black像素时，它的所有三个通道都位于0%，0以十进制表示。任何其他通道值（始终在该[0, 1]范围内）至少与- 从到 的0任何数字都大于或等于。所以区间内的最大值和区间内的值总是等于区间内的值0100[0, 1][0, 1]区间内的值。
现在假设该元素的第 i列像素与第j行像素相交处的像素p为lightgreen1，对应于(即)background的。假设背景图像中的相应像素是相同的深绿色 - 。prgb(57%, 93%, 57%)rgb(4%, 13%, 6%)
然后该像素的 RGB 通道lighten：
max(.57, .04) = .57\nmax(.93, .13) = .93\nmax(.57, .06) = .57\nlightgreen这与我们选择background的相同p！
现在background我们在这里选择的非常暗，这意味着它的像素的通道值非常接近于零，所以我们有很好的机会通过我们的body很多选项来实现这一点。backgroundp.
例如，即使我们选择类似 的hotpink，它的通道值 ( ) 仍然大于我们非常暗的背景中的像素的通道值，因此与其混合的结果仍然是backgroundprgb(100%, 41%, 71%)hotpink。
lighten方法的突破点
\n然而，如果我们选择像 a 这样的值background: red作为p，这种方法也会失败，因为绿色和蓝色通道值是( )0的- 也就是说，甚至低于我们为深绿色背景图像设置的非常低的值。。您可以在下面看到混合的结果不再是这样：redrgb(100%, 0%, 0%)bodyrgb(100%, 0%, 0%)
max(1, .04) = 1\nmax(0, .13) = .13\nmax(0, .06) = .06\n这是它的屏幕截图：
\n
啊...
\n如果下面的层（上面的层）不那么暗的话，情况只会background-image更糟body。以我们在示例中使用的第一张图像为例 - 即使是hotpink适用于我们的p较暗body背景图像的背景现在仍然无法正常工作。
在轻盈的另一端
\n我们还可以看到一种纯 CSS 方式，用于处理background-image上的body非常亮而background我们的 上p的 非常暗的情况。
由于我们想要看到实际文本字母所占据的区域中的 ，因此我们可以为它们选择任何我们想要的初始 RGB 值，在本例中，我们background选择。bodywhite
因此，当我们background: black从我们的开始时p，我们可以使用multiply混合模式。
1 - (1 - 0)\xc2\xb7(1 - .41) = 1 - 1\xc2\xb7.59 = 1 - .59 = .41\n1 - (1 - 0)\xc2\xb7(1 - .55) = 1 - 1\xc2\xb7.45 = 1 - .45 = .55\n1 - (1 - 0)\xc2\xb7(1 - .91) = 1 - 1\xc2\xb7.09 = 1 - .09 = .91\n1 - (1 - 1)\xc2\xb7(1 - .41) = 1 - 0\xc2\xb7.59 = 1 - 0 = 1\n1 - (1 - 1)\xc2\xb7(1 - .55) = 1 - 0\xc2\xb7.45 = 1 - 0 = 1\n1 - (1 - 1)\xc2\xb7(1 - .91) = 1 - 0\xc2\xb7.09 = 1 - 0 = 1\n混合模式如何multiply工作
\n在混合模式的情况下multiply，如果 C\xe2\x82\x81 是顶层像素的通用通道（R、G 或 B，无所谓），并且 C\xe2\x82\x80 是通用通道底层对应像素的通道值，公式为：
C\xe2\x82\x81\xc2\xb7C\xe2\x82\x80\n假设元素的第 i列像素和第 j行像素之间的交集处的像素p为white1，对应于实际文本（即rgb(100%, 100%, 100%)，所有三个通道值均在 处达到最大值0%）。假设body背景图像中对应的像素是rgb(45%, 77%, 80%)一种浅青色。
那么混合模式操作后该像素的 RGB 通道结果为multiply：
1\xc2\xb7.45 = .45\n1\xc2\xb7.77 = .77\n1\xc2\xb7.80 = .80\n也就是说，通道值与背景图像中的像素完全相同body！
一般来说，当两层中的一层中的一个像素是white并且我们使用multiply混合模式时，那么混合的结果是另一层中的像素的RGB值（而不是具有该像素的white像素）。
这是因为当我们有一个white像素时，它的所有三个通道都达到最大值100%，1以十进制表示），这使得整个乘积等于另一个因子。
现在假设元素的第 i列像素和第 j行像素之间的交点处的像素p为black1，对应于background（即rgb(100%, 100%, 100%)，所有三个通道值均在 处达到最大值100%）。假设背景图像中对应的像素为相同的浅青色rgb(45%, 77%, 80%)。
那么混合模式操作后该像素的 RGB 通道结果为multiply：
0\xc2\xb7.45 = 0\n0\xc2\xb7.77 = 0\n0\xc2\xb7.80 = 0\n即，rgb(0%, 0%, 0%)或者black！
一般来说，当两层之一中的像素为black且我们使用multiply混合模式时，则混合的结果也是black。
这是因为当我们有一个black像素时，它的所有三个通道都在0%，0以十进制表示，因此 或C\xe2\x82\x81（C\xe2\x82\x80取决于像素在两层中的哪一层black）是0，从而使整个产品/最终结果0（或0%） 。所有三个通道值都为0%，这意味着black。
multiply方法的突破点
\n对于background我们的任何p不完全的情况black，这种方法都会失败。
假设我们p有一个靛蓝background( rgb(29%, 0%, 51%))，与明亮的背景图像相比，它仍然很暗body。rgb(45%, 77%, 80%)替换我们的公式（并考虑相应背景像素的相同值），我们对三个通道有以下内容：
.29\xc2\xb7.45 = .1305\n0\xc2\xb7.77 = 0\n.51\xc2\xb7.80 = .408\n结果是，这与我们开始时的rgb(13.05%, 0%, 40.8%)靛蓝不同， 。它们都是深色的，但它们是不同的，这种差异取决于下面背景的 RGB 通道。backgroundrgb(29%, 0%, 51%)body
下面的屏幕截图说明了如果我们想要任何background不完全black适合我们的p使用时遇到的问题multiply混合模式
越轻background的p问题越明显。
darken- 也许是另一个可以接受的选择？
\n现在，如果背景图像非常亮（只是亮，但与我们想要的body通道相同），我们可能会通过将混合模式更改为backgroundpdarken。
例如，如下所示，body背景图像大多只是浅橙粉色，而我们background: maroon为我们设置的p：
1 - (1 - 1)\xc2\xb7(1 - .41) = 1 - 0\xc2\xb7.59 = 1 - 0 = 1\n1 - (1 - .86)\xc2\xb7(1 - .55) = 1 - .14\xc2\xb7.45 = 1 - .063 = .937\n1 - (1 - .73)\xc2\xb7(1 - .91) = 1 - .17\xc2\xb7.09 = 1 - .0153 = .9847\nhtml, body { display: grid }\n\nhtml { height: 100% }\n\nbody {\n background: url(https://images.unsplash.com/photo-1533563906091-fdfdffc3e3c4?w=1400) 50%/ cover\n}\n\np {\n place-self: center;\n padding: 0 0.125em;\n width: min-content;\n background: lightgreen;\n font: 900 clamp(1.25em, 25vmin, 25em)/ 1.125 sans-serif;\n text-align: center;\n mix-blend-mode: lighten\n}如何darken工作
\n在这种情况下darken，如果 C\xe2\x82\x81 是顶层像素和 C 的通用通道（R、G 或 B，同样，没关系，公式是相同的） \xe2\x82\x80 是底层对应像素的通用通道值，公式如下：
min(C\xe2\x82\x81, C\xe2\x82\x80)\n再次，一个非常简单的公式。
\n假设元素的第 i列像素和第 j行像素之间的交集处的像素p为white1，对应于实际文本（即rgb(100%, 100%, 100%)，所有三个通道值均在 处达到最大值100%）。假设body背景图像中对应的像素是rgb(100%, 49%, 44%)一种浅鲑鱼。
那么混合模式操作后该像素的 RGB 通道结果为darken：
min(1, 1) = 1\nmin(1, .49) = .49\nmin(1, .44) = .44\n同样，这与body背景图像中的像素完全相同的通道值！
这是因为当我们有一个white像素时，它的所有三个通道都处于最大值100%（1以十进制表示）。而任何其他通道值（始终在该[0, 1]范围内）至少与- 从到 的1任何数字都小于或等于。因此，和 区间内的值之间的最小值始终等于区间内的值。0111[0, 1][0, 1]
现在假设该元素的第 i列像素与第j行像素相交处的像素p为maroon1，对应于(即)background的。假设背景图像中对应的像素是相同的浅鲑鱼 - 。prgb(50%, 0%, 0%)rgb(100%, 49%, 44%)
那么混合模式操作后该像素的 RGB 通道结果为darken：
min(.5, 1) = .5\nmin(0, .49) = 0\nmin(0, .44) = 0\n这与maroon我们选择的background相同p！
darken方法的突破点
\nbackground: indigo然而，如果我们为我们选择像 a 这样的东西，这种方法也会失败，因为p蓝色通道值是( ) - 也就是说，甚至低于我们在 上的深绿色背景图像的非常低的值。您可以在下面看到混合的结果不再是这样：51%indigorgb(29%, 0%, 51%)bodyrgb(29%, 0%, 51%)
min(.29, 1) = .29\nmin(0, .49) = 0\nmin(.51, .44) = .44\n这是它的屏幕截图 - 甚至比混合模式失败background: indigo时更糟糕：pmultiply
纯CSS：background-clip: text
\n这已经被提到过，所以我通常会避免再次讨论它，特别是因为考虑到它的滚动复杂性，我不会使用它的解决方案，但自上次答案以来的十年里发生了很多变化！
\nbackground-clip: text现在是标准的，所有浏览器都支持，不需要-webkit-前缀（或者可能只在移动设备上需要它，我没有测试过，因为我自己没有智能手机在我的环境中，无法使用使用时间不到 10 年并且运行所有旧版本的智能手机）并且可以在速记中使用。
<p contenteditable>Hello, world!</p>max(C\xe2\x82\x81, C\xe2\x82\x80)\n不需要任何解决方法来在其他浏览器中模拟它，例如-moz-element()在 Firefox 中（标准element()版本的前缀版本，Chromium 浏览器尚未实现，并且由于安全问题可能不会实现）。
这样做的问题是它需要在和元素background-image上设置相同的值，并且图像需要对齐。使用 可以轻松实现这一点，但这意味着无法随页面滚动。在某些情况下可能完全没问题，但在其他情况下则不然。bodypbackground-attachment: fixedbackground
更烦人的问题是，由于Firefox 的 bug很快就到了上学的年龄，我们需要用完伪元素。
\n如果没有这个错误，这一点代码就可以做到这一点：
\nbody { background: url(myimage.jpg) 50%/ cover fixed }\n\np {\n background: \n url(myimage.jpg) 50%/ cover text fixed, \n linear-gradient(indigo 0 0);\n color: transparent\n}\n请注意，background-clip: text如果我们需要滚动，这种方法意味着我们会遇到问题。
使用 SVG filter：创建真实的文本透明度
\n这个想法是这样的：如果我们不希望我们的背景为black，那么我们将我们的文本black（即，将所有三个 RGB 通道归零rgb(0, 0, 0)）并应用 a filter，它给我们一个结果，其 alpha 通道是根据以下计算得出的：其输入的RGBA通道如下：
v\xc2\xb7R + v\xc2\xb7G + v\xc2\xb7B + 0\xc2\xb7A + 0 = v\xc2\xb7(R + G + B) + 0 = v\xc2\xb7(R + G + B)\n这意味着结果的 alpha 是0输入的 RGB 通道全部为 的地方0，也就是输入的像素为 的地方rgb(0, 0, 0)（即black）。在我们的例子中，这就是文本。
max(0, .04) = .04\nmax(0, .13) = .13\nmax(0, .06) = .06\nmax(.57, .04) = .57\nmax(.93, .13) = .93\nmax(.57, .06) = .57\n现在您可能想知道该公式中的这些值是怎么回事，矩阵有什么用，它们是如何连接的......
\nv v v 0 0\n是 矩阵第四（最后）行的values值feColorMatrix。v是一个很大的值，让我们输入一个 random 999，以确保完全black区域之外（即文本之外）的结果 alpha 始终为 \xe2\x89\xa5 1（这意味着完全不透明）。
其他三行为我们提供 RGB 通道以及我们只想保持不变的通道。输出的红色通道只是1与输入的红色通道加上一堆零相乘，这对于绿色和蓝色通道也是有效的。
1\xc2\xb7R + 0\xc2\xb7G + 0\xc2\xb7B + 0\xc2\xb7A + 0 = R + 0 + 0 + 0 + 0 = R\n0\xc2\xb7R + 1\xc2\xb7G + 0\xc2\xb7B + 0\xc2\xb7A + 0 = 0 + G + 0 + 0 + 0 = G\n0\xc2\xb7R + 0\xc2\xb7G + 1\xc2\xb7B + 0\xc2\xb7A + 0 = 0 + 0 + B + 0 + 0 = B\n这意味着前三行矩阵是：
\n1 0 0 0 0\n0 1 0 0 0\n0 0 1 0 0\n（1对角线和0其他地方）
现在...取决于您的挑剔程度，您可能会对这个结果感到满意...或不满意！
\n我对此并不满意。
\n边缘还有一些黑色，看起来有点粗糙。
\n幸运的是，在这种特殊情况下，background我们的<
Est*_*ber 10
它必须是动态的吗？唯一的方法是使用具有透明度的图像(GIF或更好的PNG).
我不确定这是不是你想要的,但无论如何都要解释.
情况:您希望通过文本看到非平坦的背景.
解决方案:没有CSS可以解决这个问题.您必须使用可靠的图像编辑器来创建包含文本的图层,并使用另一个图层作为文本的否定图层
这可能会让你有一些有趣的效果,但是如果你想要它是动态的,你必须在飞行服务器端生成图像.
对于纯CSS,这种技巧目前是不可能的(可能使用Javascript).
编辑
看到Paul在webkit上的发现让我思考如何在Firefox,Opera和IE中伪造这种行为.到目前为止,我已经运气好了canvas在Firefox上使用该元素,我正试图找到一些行为filter:progid:DXImageTransform.Microsoft.
到目前为止canvas,这就是我所做的
<html>
<body>
<canvas id="c" width="150" height="150">
</canvas>
<script>
ctx = document.getElementById("c").getContext("2d");
// draw rectangle filling the canvas element
ctx.fillStyle = "red";
ctx.fillRect(0,0,150,150);
// set composite property
ctx.globalCompositeOperation = 'destination-out';
// the text to be added now will "crop out" the red rectangle
ctx.strokeText("Cropping the", 10, 20);
ctx.strokeText("red rectangle", 10, 40);
</script>
</body>
</html>
通过使用排除合成和绘制文本canvas.
我不清楚你在问什么(100%的透明度意味着某些东西是看不见的,隐形文字通常不是一个好主意),但总的来说:
CSS
opacity属性适用于整个元素,而不仅仅是文本.所以如果你有这个HTML:
Run Code Online (Sandbox Code Playgroud)<div class="opacity-50"> This is a div with a background colour and 50% opacity </div>这个CSS:
Run Code Online (Sandbox Code Playgroud).opacity-50 { background: #ccc; color: #000; opacity: 0.5; }然后它的背景和文本都有50%的不透明度.
rgba颜色值允许您指定半透明颜色.所以,如果你有这个HTML:
Run Code Online (Sandbox Code Playgroud)<div class="text-opacity-50"> This is a div with semi-transparent text </div>这个CSS:
Run Code Online (Sandbox Code Playgroud).text-opacity-50 { background: #ccc; color: rgba(0,0,0,0.5); }然后只有它的文本将具有50%的不透明度.
我认为rgba颜色值的支持略少于浏览量opacity.