CSS：不工作后答案

【问题标题】：CSS :after not workingCSS：不工作后
【发布时间】：2022-04-10 11:37:02
【问题描述】：

我正在尝试仅使背景图像透明，我知道可以通过在 CSS :after 中添加不透明度来实现。但是我的代码编辑脚本或css似乎有问题，我不知道为什么。

我正在尝试检查我的代码有什么问题。我期待看到这段代码的红色背景，但我看不到任何红色

<head>
<style type="text/css"> #chattingBox:after { background-color: red !important;}</style>
</head>
<body>
<div id="chattingBox" style="overflow: scroll; height: 150px; border: 1px solid black; background: url("/images/large/5.png") center center / 100px no-repeat;"></div>
</body>

当我将 CSS 编写为 '#chattingBox { background...'（没有 :after）时，我可以看到红色，所以我猜这是 :after 的问题，但我不知道如何解决这个问题。

如果 :after 问题可以解决，我也可以设置不透明度，有人知道为什么 :after 不起作用吗？

【问题讨论】：

标签： css opacity

【解决方案1】：

那是因为你的 :after 伪元素是空的。如果添加一些内容如：

#chattingBox:after {
    content: "\A0";
    background-color: red !important;
}

然后你会看到一些东西。 \A0 是不间断空格的代码（相当于 HTML &nbsp;，但任何内容都可以。

一般来说，:after 和 :before 没有content 是不完整的。

【讨论】：