图片底部遮罩效果

来源：互联网发布：java输入整数异常编辑：程序博客网时间：2024/05/16 01:35

这里写图片描述

background-color: rgba(0, 0, 0, .5);中的0.5表示这个矩形遮罩的透明度。

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>HTML+CSS实现图片下半部分遮罩文字效果</title>    <style>        .class_outer {            display: block;            width: 550px;            height: 260px;            margin: 10px auto;            position: relative;            overflow: hidden;        }        .class_cover {            width: 100%;            height: 50px;            line-height: 50px;            padding-left: 5px;            background-color: rgba(0, 0, 0, .5);            color: #FFFFFF;            font-size: 26px;            position: absolute;            left: 0px;            bottom: 0px;        }    </style></head><body>    <a href="#" class="class_outer">        <img src="img/01.jpg" width="550px" height="276px" border="0" />        <span class="class_cover">我是文本来描述内容的。</span>    </a></body></html>

0 0