Question

我有以下html

<h1 class="title-wrapper"><span class="title">Example</span></h1>

我有以下CSS：

 .title-wrapper {
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient( 90deg, rgb(53,65,76) 0%, rgba(53,65,76,0) 100%);
    opacity: 0.51;
    display: block;
    width: 100%;
    z-index: 5;
    padding: 12.5px 0 12.5px 12px;
}

.title {
    opacity: 1.0;
    font-size: 1.3em;
    font-weight: 600;
    color: white;
}

我想将title-wrapper background-image的不透明度设置为0.51，但我希望将文本的不透明度保持为1.0。我怎样才能做到这一点？

现在文字看起来很苍白。我猜测标题包装器的不透明度正在影响文本。

Answer 1

您可以在：before pseudo class

中定义背景图像

 .title-wrapper {
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    z-index: 5;
    padding: 12.5px 0 12.5px 12px;
}

.title-wrapper:before{
    content:'';
    background-image: linear-gradient( 90deg, rgb(53,65,76) 0%, rgba(53,65,76,0) 100%);
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:0.51;
    z-index: -1;
}

.title {
    font-size: 1.3em;
    font-weight: 600;
    color: white;
}

<h1 class="title-wrapper"><span class="title">Example</span></h1>

Answer 2

为什么不一直使用rgba颜色？

＆＃13;

 .title-wrapper {
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient( 90deg, rgba(53,65,76,0.51) 0%, rgba(53,65,76,0) 100%);
    /*opacity: 0.51;*/
    display: block;
    width: 100%;
    z-index: 5;
    padding: 12.5px 0 12.5px 12px;
}

.title {
    opacity: 1.0;
    font-size: 1.3em;
    font-weight: 600;
    color: white;
}
 /* DEMO purpose*/
body {
  background:url(http://lorempixel.com/600/300/city/1);
  background-size:cover
    }

＆＃13;

<h1 class="title-wrapper"><span class="title">Example</span></h1>

＆＃13;

仅更改背景不透明度

2 个答案: