渐变背景background-image:linear-gradient(transparent,rgba(0,0,0,0.6)

最新推荐文章于 2023-10-15 20:45:29 发布

zzzley

最新推荐文章于 2023-10-15 20:45:29 发布

阅读量158

点赞数

分类专栏：前端文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_43286995/article/details/129040511

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.第一段代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变背景</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            /* background-image: linear-gradient(
                rgb(143, 90, 234),
                green,
                rgb(234, 10, 122),
                black
            ); */
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0, .6)
            );
        }
    </style>
</head>

<body>

    <div class="box"></div>
</body>

</html>

效果图

在这里插入图片描述

2 第二段代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品展示效果</title>
    <style>
        .box {
            position: relative;
        }
        
        .box img {
            width: 300px;
        }
        
        .box .title {
            position: absolute;
            left: 15px;
            bottom: 20px;
            z-index: 2;
            width: 260px;
            color: #fff;
            font-size: 20px;
            font-weight: 700;
        }

        .box .mask {
            position: absolute;
            left: 0;
            top: 0;

            /* display: none; */
            opacity: 0;
            width: 300px;
            height: 212px;
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,.6)
            );
            transition: all .5s;
        }

        .box:hover .mask {
            opacity: 1;
            /* display: block; */
        }
    </style>
</head>

<body>

    <div class="box">
        <img src="./images/product.jpeg" alt="">
        <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
        <!-- 渐变背景 mask -->
        <div class="mask"></div>
    </div>
</body>

</html>

效果图

在这里插入图片描述

zzzley

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
渐变背景background-image:linear-gradient(transparent,rgba(0,0,0,0.6)

【代码】渐变背景background-image:linear-gradient(transparent,rgba(0,0,0,0.6)
复制链接

扫一扫