尝试使图像背景不透明

Question

我试图使图像仅不透明，同时保持屏幕的其余部分正常。

我已经尝试了不透明度的简单用法(例如：不透明度：0.9；(

我当前的代码如下所示：HTML

<ion-content class='background' no-bounce>

CSS

ion-content.background{
--background: url(../../assets/main_background4.jpg) 0 0/100% 100% no-repeat;
}

我想把我用作背景的图像稍微调暗一点，但目前无论我尝试什么，整个屏幕都是不透明的。是否可以在背景部分以某种方式设置不透明度？

Answer 1

尝试以下css：

<style>
ion-content.background {
position: relative;
display: block;
width:300px;
}
ion-content.background::after {
content: "";
background: url('../../assets/main_background4.jpg');
opacity: 0.2;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
}
</style>