图片底部遮罩效果

最新推荐文章于 2019-09-09 20:24:47 发布

erdouzhang

最新推荐文章于 2019-09-09 20:24:47 发布

阅读量1k

点赞数 1

分类专栏：图片

本文链接：https://blog.csdn.net/erdouzhang/article/details/60966769

版权

图片专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这里写图片描述

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>

erdouzhang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片底部遮罩效果

background-color: rgba(0, 0, 0, .5);中的0.5表示这个矩形遮罩的透明度。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>HTML+CSS实现图片下半部分遮罩文字效果</title> <style> .class_outer { dis
复制链接

扫一扫