浅色背景图像CSS3

我想有一个背景图像一帧，但我需要使图像更轻。我曾尝试过使用不透明度，但随后另一帧的背景图像会闪烁。我在同一帧中也有一些文本，我不想让这些文本变得更轻

我用CSS3编写，下面是我的代码

        .frameContent
     {
        background-image: url(/image/and_02.jpg); 
        background-size: 100%;
        vertical-align: top; 
        border-left: #FFFFFF 20px solid;
        border-right: #FFFFFF 20px solid;
        border-top: #FFFFFF 15px solid;
        padding: 25px 10px 10px 10px;
        height:100%;
        box-shadow: 2px 2px 2px;
    }

---

创建嵌套元素怎么样

.frame=纯白色； .frameContent=部分透明的背景

<div class="frame"><div class="frameContent">My Content here</div></div>

我的内容在这里

创建嵌套元素怎么样

.frame=纯白色； .frameContent=部分透明的背景

<div class="frame"><div class="frameContent">My Content here</div></div>

我的内容在这里

将以下css添加到类（）

检查它是否适合你。您还可以查看以下链接以供参考

---

将以下css添加到您的类（）

检查它是否适合你。您还可以查看以下链接以供参考

---

对容器元素执行以下操作：

yourImageContainer:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: hsla(180,0%,50%,0.25);
  pointer-events: none;
}

---

这将根据您选择的颜色放置较深/较浅的遮罩。

对容器元素执行以下操作：

yourImageContainer:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: hsla(180,0%,50%,0.25);
  pointer-events: none;
}

---

这将根据您选择的颜色设置较深/较浅的遮罩。

没有CSS属性背景不透明度，但您可以通过在其后面插入伪元素（：：after）来实现。

.frameContent{
    position:relative;
    border-left: #FFFFFF 20px solid;
    border-right: #FFFFFF 20px solid;
    border-top: #FFFFFF 15px solid;
    padding: 25px 10px 10px 10px;
    height:100%;
    box-shadow: 2px 2px 2px;
}

.frameContent::after{
   content: "";
   background: url(/image/and_02.jpg);
   background-size:cover;
   opacity: 0.5;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   position: absolute;
   z-index: -1;
}

---

没有CSS属性背景不透明度，但您可以通过在其后面插入伪元素（：：after）来实现它。

.frameContent{
    position:relative;
    border-left: #FFFFFF 20px solid;
    border-right: #FFFFFF 20px solid;
    border-top: #FFFFFF 15px solid;
    padding: 25px 10px 10px 10px;
    height:100%;
    box-shadow: 2px 2px 2px;
}

.frameContent::after{
   content: "";
   background: url(/image/and_02.jpg);
   background-size:cover;
   opacity: 0.5;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   position: absolute;
   z-index: -1;
}

---

正如Bappi Das所说，没有背景不透明度属性。但是背景图像可以采用多个参数。我们可以使用它在图像前面添加一些白色。不幸的是，我们不能简单地指定颜色，但我们可以指定渐变。因此，如果我们指定一个具有两倍相同颜色的渐变，并使用

rgba

使该颜色略微透明，我们可以改变图像的颜色

background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
                  url("/image/and_02.jpg");

---

正如Bappi Das所说，没有背景不透明度属性。但是背景图像可以采用多个参数。我们可以使用它在图像前面添加一些白色。不幸的是，我们不能简单地指定颜色，但我们可以指定渐变。因此，如果我们指定一个具有两倍相同颜色的渐变，并使用

rgba

使该颜色略微透明，我们可以改变图像的颜色

background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
                  url("/image/and_02.jpg");

---

你可以发布html来明确你需要哪一帧的亮化图像吗？你可以发布html来明确你需要哪一帧的亮化图像吗？