Question

我在页面上有一个图像。我在Div中添加了一个Div，页面上有一个标题和一个段落。我已经将Div的背景透明化，background-color: rgba(0,0,0,.6);。但我需要像这样实现这一点background-color:black; opacity:0.6"。问题是，如果我使用不透明度进行，那么标题和段落也会变得模糊Div的颜色。我该如何解决？以下是我的完整代码。

CSS

<style type="text/css">
.div1 {
        max-width: 100%;
        height: auto;
        text-align: center;
        display: block;
        border: none;
    }
    .feature-text-overlay {
        background-color: rgba(0,0,0,.3);
        bottom: 0;
        padding: .6em 0 .8em;
        position: absolute;
        text-align: center;
        width: 100%;
    }
    .feature-title {
        font-size: .875em;
        margin: 0;
        text-transform: uppercase;
        color:white;
    }
    .feature-description {
        line-height: 1.2;
        margin: 0 2em;
        color:white;
    }
</style>

HTML

<div class="div1">
    <img src="~/Content/Image/rendering-graphics-in-resolution-222734.jpg" />
    <div class="feature-text-overlay" style="height:52.599999277954px; min-height:1px;">
        <h4 class="feature-title">Enterprise Mobility Suite</h4>
        <p class="feature-description">Manages Users, Devices and Data</p>
    </div>
</div>

Answer 1

CSS

.feature-text-overlay {
    bottom: 0;
    padding: .6em 0 .8em;
    position: absolute;
    text-align: center;
    width: 100%;
    position:relative;    /* add this to specify position */
}

/* create pseudo css element */
.feature-text-overlay:before {
    content:"";
    background-color: #000;
    opacity:0.3;
    bottom: 0;
    top:0;
    right:0;
    left:0;
    position: absolute;
}

<强> Demo

根据评论 demo 2

进行修改

使用不透明度模糊Div的背景颜色，而不是提及Div的rgba颜色

1 个答案: