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

感觉自己做的不好看

bitchbiss 2018-11-29

源自：网页布局案例 2-9 作业题

收起

3回答

好帮手慕阿满 2019-02-28 19:27:19

参考一下如下代码：

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

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

收起回答

yangyang533 #1

谢谢，我还不知道有颜色可以用 rgba来设置。

2019-03-01 21:46:09

yangyang533 2019-02-27 19:58:54

建议使用遮罩，如果单纯使用元素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;
}

收起回答

好帮手慕阿满 #1

同学使用遮罩完成的不错，可以使用遮罩完成。但是设置背景为白色，使用透明度也可以完成的。祝：学习愉快~

2019-02-28 10:25:54
yangyang533 回复好帮手慕阿满 #2

可以用代码实现一下吗？有单独为背景设置透明度的属性吗？直接设置opacity:0.5以后连文字都会变得半透明呀。

2019-02-28 15:53:58