这块是不是应该采用遮罩层做？

参考一下如下代码：

HTML代码：
<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>EXPLORE</a>
</div>
CSS：
.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;
}
.aboutleftbottom  a{
	background-color:black;
	padding:10px 15px;
	color:white;
	border:2px solid black;
	margin:8px 0px;
    display:inline-block;
}

这个需要结合其他代码一起完成作业效果。同学只做参考，另外使用遮罩层完成也可以。祝：学习愉快~

建议使用遮罩，如果单纯使用元素opacity的属性会导致元素的整体都变得半透明，后果就是像图片上的那样，黑色边框和文字都变成变成了灰色。

我是在文字上方加了一层白色半透明遮罩，配合使用的绝对定位和z-index属性，可以完美的实现效果图里的效果。

参考代码：

html

<div class="aboutTopLeft">
    <h2>A WORD <br>ABOUT US</h2>
    <div class="description">
        <div class="text">
            Present dignissim viverra set,bibendum ligula congue non.Sed ac nislet
            felis gravida commodo? Suspendisse eget ullamcorper ipsum.Suspendisse diam amet.
        </div>
        <div class="topLayer"></div><!--description的半透明遮罩-->
        <a href="#">EXPLORER</a>
    </div>
</div>

css：

.about .aboutTop .aboutTopLeft{
    /*border: 1px solid navy;*/
    width: 19.3%;
    /*height: 450px;*/
    position: absolute;
    top: 340px;
    left: 22%;
}
.about .aboutTop .aboutTopLeft h2{
    /*border: 1px solid purple;*/
    font-size: 4em;
    font-weight: normal;
    margin: 10px;
}
.about .aboutTop .aboutTopLeft .description{
    width: 100%;
    height: 330px;
    position: relative;
    border: 2px solid rgb(157,137,146);
}
.about .aboutTop .aboutTopLeft .description .text{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    margin: 7%;
    font-size: 2.2em;
    line-height: 35px;
}
.about .aboutTop .aboutTopLeft .description .topLayer{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    background-color: #ffffff;
    opacity: 0.5;
}
.about .aboutTop .aboutTopLeft .description a{
    display: block;
    width: 130px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 2.3em;
    background-color: #000000;
    color: #ffffff;
    border: 2px solid #000000;
    position: absolute;
    top: 75%;
    left: 7%;
    z-index: 15;
}
.about .aboutTop .aboutTopLeft a:hover{
    background-color: #ffffff;
    color: #000000;
}