Question

我想要一个背景图像一帧，但我需要让图像更亮。我尝试过使用不透明度，但是然后另一帧的背景图像会闪耀。我在同一帧中也有一些文字，我不希望文字变浅。

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

Answer 1

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

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

Answer 2

如何创建嵌套元素？

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

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

Answer 3

将以下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

Answer 4

对容器元素执行此操作：

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

这将根据您选择的颜色设置更暗/更浅的面具。

Answer 5

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

较轻的背景图像CSS3

5 个答案: