渐变背景效果

使用background-image: linear-gradient实现渐变背景效果

• css语法

background-image: linear-gradient (
	颜色1,
	颜色2
	)

效果

css样式

.box {
            width: 300px;
            height: 200px;
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,0.5)
            );

渐变案例

• css部分

<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: 0px;
            top: 0px;
            width: 300px;
            height: 199.96px;
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,.5)
            );
            /* 隐藏元素 */
            opacity: 0;
            transition: all 1s;
        }
        .box:hover .mask {
            opacity: 1;
        }
</style>

• html部分

<div class="box">
        <img src="../image/1.jpg" alt="">
        <div class="title">照片的意义在于把瞬间变成永恒</div>
        <div class="mask"></div>
</div>