CSS学习38：背景渐变

最新推荐文章于 2024-08-21 09:04:44 发布

玉安_ZhangDe

最新推荐文章于 2024-08-21 09:04:44 发布

阅读量846

点赞数

分类专栏： CSS 文章标签： css css3 学习前端

本文链接：https://blog.csdn.net/qq_47373340/article/details/124236516

版权

CSS 专栏收录该内容

39 篇文章 7 订阅

订阅专栏

这篇博客介绍了如何利用CSS的linear-gradient属性创建背景渐变遮罩，以达到图片和背景的美观过渡效果。通过示例代码展示了一个图片在鼠标悬停时显示黑色半透明遮罩的效果，从而实现动态的视觉体验。

摘要由CSDN通过智能技术生成

语法：

background-image: linear-gradient(

颜色1,

颜色2

);

该属性最多的应该是用于给图片、背景做渐变遮罩，具体更多细致的用法请大家移步到 css 背景渐变_老leng不会飞的博客-CSDN博客_css背景渐变

案例效果：

代码：

<head>
    <style>
        .pic {
            position: relative;
            margin: 100px auto;
            width: 446px;
            height: 445px;
            /* 超出的范围不可见 */
            overflow: hidden;
            /* 设置pic里的mask遮罩显示所需要的时间 */
            transition: opacity .7s;
        }
        img {
            width: 446px;
            height: 445px;
        }
        .pic:hover .mask{
            /* 显示遮罩 */
            opacity: 1;
        }
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,.6)
            );
            /* 默认透明不可见，当鼠标移动到图片上方显示 */
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="pic">
        <img src="HUAWEI P50E.jpg" alt="HUAWEI P50E">
        <div class="mask"></div>
    </div>
</body>
</html>