老师，怎样使背景变为半透明但文字可以正常显示

在about中利用opacity属性设置会使div中的文字和背景都成透明色，请问怎样才能使文字正常显示，背景颜色半透明如图中效果

午伤 2020-03-17

源自：前端油画商城案例 4-3 项目作业

收起

3回答

guly 回答被采纳获得+3积分 2020-03-17 18:15:59

你好，建议参考代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
 
        /*-- About Section --*/
        .about{
            width: 1080px;
            padding-top:50px;
            background-color:white;
            margin:0 auto;
            position:relative;
            overflow: hidden;
        }
        h3{
            color: #000;
            font-size: 50px;
            text-align:center;
        }
        label.line{
            background-color:#07cbc9;
            display:block;
            width: 40px;
            height: 2px;
            margin:15px auto;
        }
        h4{
            font-size:35px;
            font-weight:normal;
        }
        h6{
            color: #BDBDBC;
            padding-bottom: 30px;
            width: 45%;
            margin: 0 auto;
            font-size: 15px;
            line-height: 25px;
            text-align:center;
        }
        .p{
            color: #797979;
            padding-bottom: 30px;
            width: 45%;
            margin: 0 auto;
            font-size: 15px;
            line-height: 25px;
            text-align:center;
        }
 
 
        .img{
            float: left;
            margin: 0 35px;
            height: 380px;
        }
 
 
 
        .aboutleftbottom {
            border: 1px solid #C5C5C5;
            padding: 25px 25px;
            text-align: left;
            position: absolute;
            width: 320px;
            top: 350px;
            color: black;
            background-color: rgba(255, 255, 255, 0.4);
        }
        .aboutleftbottom  p{
            margin-bottom:10px;
            line-height:25px;
        }
    </style>
</head>
<body>
<div id="about" style="witdh:100%">
    <div class="about">
        <div class="abouttop">
            <h3>ABOUT</h3>
            <label class="line"></label>
            <p class="p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p>
            <div class="img">
                <img height="100%" src="images/bb3.jpg">
            </div>
            <div class="aboutmiddle">
                <div class="aboutleftbottom">
                    <p>Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</p>
                    <a href="#"  data-toggle="modal" data-target="#myModal">EXPLORE</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>