一个简单的图片遮罩效果

2019年03月29日| 作者:策策| 浏览:257次


今天,有位朋友问了我一个图片遮罩并且出现文字的效果(如下图)


个人觉得还是比较简单的,但是由于朋友问嘛,我便直接写了出来,废话少说,直接上代码↓ ↓ ↓

HTML:

<div id="imgbox">
<img src="cs.jpg"/>
</div>

CSS:

#imgbox{
        width:300px;
        height:169px;
        overflow:hidden;
        box-shadow:0 0 15px #000;
        position:relative;}
    #imgbox::after{/*利用伪元素*/
        content:'\4f60\597d';/* unicode 编码 */
        position:absolute;
        width:300px;
        line-height:169px;
        top: 0;
        left: 0;
        text-align: center;
        color:#fff;
        opacity:0;/* 完全透明 */
        transition:.5s;/*过渡效果*/
        background-color:rgba(0,0,0,.5);
        
    }
    #imgbox:hover::after{opacity:1;/* 不透明 */}

好了,完成,其实挺简单的,当然方法有很多,理解这个思路就行。



*✧⁺˚⁺ପ(๑・ω・)੭ु⁾⁾ 好好学习天天向上



文章标签:CSS

本文选自策策的原创文章,转载请注明内容来源:CeceBlog(https://cecebk.cn/post/14.html)

评论列表:

评论:




作者动态
制作主题,网站,设计,收徒 联系站长
标签列表