CSS中可以很方便地使用:hover伪类来实现在鼠标悬停时改变图片的效果,但如果要让图片变化在点击之后保持,则需要使用一些JavaScript实现。
一种常见的实现方式是通过JavaScript在页面中动态添加一个div,并将被点击的图片设置为这个div的背景图。以下是实现这个效果的HTML和CSS代码:
<div id="overlay"></div> <img src="original-image.jpg" onclick="showOverlay(this);"> #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0.5); z-index: 999; display: none; } #overlay.show { display: block; }
这里我们使用了一个id为overlay的div来覆盖在点击的图片上方,设置了它的宽度和高度为100%,背景为半透明黑色,并将z-index设置为999以确保它处于最顶层。初始时这个div是隐藏的,当图片被点击后,调用showOverlay函数展示overlay。
function showOverlay(img) { var overlay = document.getElementById('overlay'); overlay.style.backgroundImage = 'url(' + img.src + ')'; overlay.classList.add('show'); }
showOverlay函数获取id为overlay的div,并将被点击的图片的src作为它的background-image属性值,最后通过给overlay添加show类来显示它。
这种方式的优点在于不需要改变HTML结构,可以用于任何图片。缺点只是需要使用JavaScript实现,并且可能在一些低端设备上表现不好。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。