4

我想有一帧背景图像，但我需要使图像更亮。我曾尝试使用不透明度，但随后来自另一帧的背景图像闪耀。我在同一个框架中也有一些文本，我不希望这些文本变得更轻。

我用 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;
    }
4

5 回答 5

9

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

background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
                  url("/image/and_02.jpg");
于 2020-08-29T12:05:06.300 回答
1

对容器元素执行此操作：

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

这将根据您选择的颜色放置一个更暗/更亮的蒙版。

于 2017-04-11T09:00:11.307 回答
0

将以下 css 添加到您的类 ()

.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;
        opacity: 0.2; 
        filter: alpha(opacity=20);
    }

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

http://css-tricks.com/snippets/css/transparent-background-images/ http://nicolasgallagher.com/css-background-image-hacks/demo/opacity.html

于 2013-07-01T08:33:12.583 回答
0

如何创建嵌套元素？

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

<div class="frame"><div class="frameContent">My Content here</div></div>
于 2013-07-01T08:26:56.130 回答
0

没有 CSS 属性 background-opacity，但是你可以通过在它后面插入一个伪元素 (::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;
}
于 2020-01-08T05:27:36.530 回答