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;
}

我只想稍微淡化用作背景的图像，但是无论如何尝试，当前整个屏幕都变得不透明。是否可以在--background部分中以某种方式设置不透明度？

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>

试图使图像背景不透明

1 个答案: