css 遮罩（点击图片显示遮罩层和链接）

最新推荐文章于 2024-07-29 11:26:16 发布

小k铁柱

最新推荐文章于 2024-07-29 11:26:16 发布

阅读量1.3k

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/qq_40890601/article/details/106287044

版权

需求

当点击图片时，显示遮罩层和文字，类似下图这样。图标是可以点击的链接。并实现垂直居中对齐。
在这里插入图片描述
我看了网上许多教程是把遮罩层放在a标签里，或者只能显示文字，没办法放链接。
只需要使用z-index 控制它们的显示顺序就好了。当鼠标移入图片时，显示遮罩层和内容。内容的z-index 值必须要大于遮罩层，这样它才能在上面显示。

显示出来了还没完，还有绝对定位元素的垂直居中显示。

	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -50px;
	margin-top: -50px;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点击图片显示遮罩和文字</title>
		<style>
			* {
    
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.main {
    
				width: 300px;
				height: 300px;
				margin

最低0.47元/天解锁文章

小k铁柱

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css 遮罩（点击图片显示遮罩层和链接）

废话不多说了，我先上效果图。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>鼠标移入图片显示遮罩层和文字</title> <style> .img_div { position: relative; width: 300px; height: 300px; } img { position:
复制链接

扫一扫