如何实现图片阴影的显示与隐藏？

基础静态实现（固定显示/隐藏） #

如果只是需要部分图片显示阴影、部分隐藏，直接给对应图片加类即可：

修改后的CSS代码 #

img {
    max-width: 100%;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.55) 5px 9px 9px;
}

.no-shadow {
    box-shadow: none !important;
}

修改后的HTML代码 #

<div class="container">
   <div class="cell1">
       <img src="minion2.jpg" width="117" height="165" alt="小黄人图片">
       <br>1 shadow
   </div>

    <div class="cell2">
        <img src="minion2.jpg" width="117" height="165" alt="小黄人图片" class="no-shadow">
        <br>2 no shadow
    </div>
</div>

交互切换实现（点击显示/隐藏阴影） #

如果需要点击图片来切换阴影的显示/隐藏，可添加简单的JavaScript实现交互：

完整代码示例 #

HTML

<div class="container">
   <div class="cell1">
       <img id="toggle-img" src="minion2.jpg" width="117" height="165" alt="小黄人图片">
       <br>点击图片切换阴影
   </div>
</div>

CSS

img {
    max-width: 100%;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.55) 5px 9px 9px;
    cursor: pointer;
}

.no-shadow {
    box-shadow: none !important;
}

JavaScript

const img = document.getElementById('toggle-img');
img.addEventListener('click', () => {
    img.classList.toggle('no-shadow');
});

说明 #

• 静态实现：给需要隐藏阴影的图片直接添加no-shadow类，即可覆盖默认的阴影样式
• 交互实现：通过JavaScript监听图片点击事件，用classList.toggle()方法切换阴影类，实现点击切换效果

内容的提问来源于stack exchange，提问作者David