CSS : 不工作后
CSS :after not working
我只是想使背景图像透明,我知道我可以通过在 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 不起作用吗?
那是因为你的 :after
伪元素是空的。如果添加一些内容如:
#chattingBox:after {
content: "\A0";
background-color: red !important;
}
然后你会看到一些东西。 \A0
是不间断 space 的代码(相当于 HTML
,但任何内容都可以。
一般来说,:after
和 :before
没有 content
是不完整的。
我只是想使背景图像透明,我知道我可以通过在 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 不起作用吗?
那是因为你的 :after
伪元素是空的。如果添加一些内容如:
#chattingBox:after {
content: "\A0";
background-color: red !important;
}
然后你会看到一些东西。 \A0
是不间断 space 的代码(相当于 HTML
,但任何内容都可以。
一般来说,:after
和 :before
没有 content
是不完整的。