【Web前端问题】css如何让遮罩层的文字居中呀，如何改变遮罩层的出现方式改为从四周出现？

Z时代
2024-01-10
分类：技术分享

图片描述

<div class="sw_mask" data-text="教育行业">
                    <img  src="/ehouse/img/service/research_1.jpg" class="second_img">                    </div>

.sw_mask {
    position: relative;
    overflow: hidden;
}
.sw_mask:after {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    content: attr(data-text);
    transition: all 1s ease;
    transform: translateY(-100%);
    color: #FFF;
}
.sw_mask:hover:after {
    transform: translateY(0);}

回答：

文字水平居中text-align: center;，垂直居中line-height: 盒子高度;

.sw_mask {
   position: relative;
   overflow: hidden;
   width: 100px;
   height: 100px;
   text-align: center; 
   line-height: 100px;}

回答：

        display:flex;
        justify-content:center;        align-items:center;

回答：

css">.sw_mask {
    position: relative;
    width:250px;
    height:200px;
    overflow: hidden;
}
.sw_mask:after {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    text-align: center; 
    line-height: 200px;
    background-color: rgba(0, 0, 0, 0.5);
    content: attr(data-text);
    transition: all 1s ease;
    transform: translateY(-100%);
    color: #FFF;
}
.sw_mask:hover:after {
    transform: translateY(0);}