渐变遮罩和图片变色

渐变遮罩和图片变色

一，给图片添加渐变遮罩

这里通过给图片<img>或者<p>的::after设置box-shadow来实现，这里使用::after伪元素便于调整渐变遮罩的位置。

<div class="production_grid">
    <div class="exhibition">
       <a href="#">
          <img src="images/production-img/production-12.jpg" alt="">
          <p>APP应用程序</p>
       </a>
   </div>
</div> 

.production_grid p::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    height: 1px;
    width: 295px;
    /* 利用shadow阴影得到渐变遮罩 */
    box-shadow: 0px 25px 150px 100px rgb(0, 0, 0) ;
    background-color: rgb(0, 0, 0,.8);
    z-index: -1;
}
.production_grid img {
    width: 295px;
    height: 295px;
}

效果：

---

二，图片变色（假性）

变相给图片( png的图标 )改变颜色（任意颜色）

（1）先看一个小测试

img {
   filter: drop-shadow(40px 0px yellow);
}

以上代码的意义是：在图片右方40px，下方40px处生成一个黄色投影。

这里的图片注意是png格式且图案为单色的，通过给图片加一个有色投影实现假性变色。

（2）应用，先看效果：

tips：
这里的点击效果使用radio表单的:checked和<label>标签绑定实现的，把点击图片(span的背景图)绑定到点击<input>上边，点击图片之后，input标签就会被选中，设置了同样的name='typepe',所以只能单选。具体不细讲。
点击之后，在把本体向下移动600px，同时正上方600px处生成了一个绿色投影，并且把本体overflow：hidden隐藏掉，实现用投影替换本体的位置，看起来就像是改变了图片的颜色。

具体代码:
html

<div class="ty_Six_Container">
    <ul>
        <li>
            <label for="cru">
                <input type="radio" name="typepe" id="cru">
                <span id="cruise"> </span>
            </label>
        </li>
        <li>
            <label for="cit">
                <input type="radio" name="typepe" id="cit">
                <span id="city"></span>
            </label>
        </li>
        <li>
            <label for="hon">
                <input type="radio" name="typepe" checked="checked" id="hon">
                <span id="honeymoon"></span>
            </label>
        </li>
        <li>
            <label for="adv">
                <input type="radio" name="typepe" id="adv">
                <span id="adventure"></span>
            </label>
        </li>
        <li>
            <label for="saf">
                <input type="radio" name="typepe" id="saf">
                <span id="safari"></span>
            </label>
        </li>
        <li>
            <label for="bea">
                <input type="radio" name="typepe" id="bea">
                <span id="beach"></span>
            </label>
        </li>
    </ul>
</div>

css

#cruise {
    background: url(../images/cruise.png) no-repeat;
}
#city {
    background: url(../images/city.png) no-repeat;
}
#honeymoon {
    background: url(../images/honeymoon.png) no-repeat;
}
#adventure {
    background: url(../images/adventure.png) no-repeat;
}
#safari {
    background: url(../images/safari.png) no-repeat;
}
#beach {
    background: url(../images/beach.png) no-repeat;
}
/* -------------------------点击改变颜色------------------------ */
.ty_Six_Container label {
    cursor: pointer;
}
/* 隐藏表单  */
.ty_Six_Container label input{ 
    display: none;
}
#cru:checked~#cruise,
#cit:checked~#city,
#hon:checked~#honeymoon,
#adv:checked~#adventure,
#saf:checked~#safari,
#bea:checked~#beach {
    position: relative;
    top: 600px;
    /* // 给png图片一个投影，实现假性改变颜色 */
    filter: drop-shadow(0px -600px #1dd2af);
}