CSS 图像映射

╰半橙微兮° 2024-04-20 08:55 60阅读 0赞

[CSS 图像映射][CSS]

![20200603102532173.png][]

<!DOCTYPE html>
    <html>
    	<head>
    	  <style> 
    		div {
    			width: 750px;
    			height: 150px;
    			box-shadow: 3px 3px 5px gray;
    		}
    		ul {
    			list-style: none;
    		}
    		li a {
    			display: block;
    			height: 50px;
    			width: 100px;
    		}
    		a[href~="a"] {
    			position: absolute;
    			top: 40px;
    			left: 170px;
    		}
    		a[href~="b"] {
    			position: absolute;
    			top: 40px;
    			left: 325px;
    		}
    		a[href~="c"] {
    			position: absolute;
    			top: 40px;
    			left: 475px;
    		}
    		a[href~="d"] {
    			position: absolute;
    			top: 40px;
    			left: 620px;
    		}
    		a:hover {
    			border: 1px solid yellow;
    			box-shadow: 5px 5px 8px gray;
    		}
    	  </style>
    	</head>
    	<body>
    		<div>
    			<img src="img.png" alt="test"></img>
    			<ul>
    				<li class="a"><a href="a" title="about"></a></li>
    				<li class="b"><a href="b" title="live"></a></li>
    				<li class="c"><a href="c" title="photos"></a></li>
    				<li class="d"><a href="d" title="contact"></a></li>
    			</ul>
    		</div>
    	</body>
    </html>

[CSS]: https://blog.csdn.net/InJavaWeTrust/article/details/101063709
[20200603102532173.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/41dc2aca7f7740ae906d9ecbd43f3040.png

发表评论取消回复

表情：

评论列表（有 0 条评论，60人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 图像映射

[CSS 图像映射][CSS] ![20200603102532173.png...

╰半橙微兮°/ 2024年04月20日 08:55/ 0 赞/ 61 阅读

相关 CSS 图像映射远距离翻转

[CSS 图像映射远距离翻转][CSS _] ![watermark_type_Z...

浅浅的花香味﹌/ 2024年04月20日 08:47/ 0 赞/ 79 阅读

相关 css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术

阅读目录 CSS 图片廊公共的HTML布局 CSS 创建图片廊响应式图片廊 CSS 图像透明/不透明

悠悠/ 2023年10月06日 22:33/ 0 赞/ 72 阅读

相关 css--悬浮图像

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta nam

我就是我/ 2023年02月17日 02:16/ 0 赞/ 137 阅读

相关 CSS 背景图像

CSS 背景图像文章目录 CSS 背景图像 CSS 背景图像还可以为特定元素设置背景图像 ![在这里插入图片描述][20210

- 日理万妓/ 2022年11月12日 09:38/ 0 赞/ 232 阅读

相关 H5图像映射——area标签

`<area>` 标签定义是图像映射中的区域，即带有可点击区域的图像。一、定义 1、`<img>` 标签中的 `usemap` 属性与 `map` 元素 `name`

旧城等待，/ 2022年11月02日 13:14/ 0 赞/ 185 阅读

相关 html 图像映射（一个图像多个连接）

以前就见过那种导航地图，点击地图的不同省份分别跳到不同的连接，现在用html实现一下，简单的。图像映射是指一个图像可以建立多个连接，就是在图像上面定义多个区域，每个区域连接

快来打我*/ 2022年09月22日 11:40/ 0 赞/ 170 阅读

相关 CSS复习之用CSS设置图像效果

今日目录： 1、设置图片边框 2、设置图片大小及缩放 3、图文混排 4、设置图片与文字的

拼搏现实的明天。/ 2022年05月25日 10:08/ 0 赞/ 241 阅读

相关 CSS3背景图像属性

CSS3背景图像属性目录： CSS3背景图像区域 CSS3背景图像定位 CSS3背景图像大小 CSS3多重背景图像 CSS3背景属性整合

缺乏、安全感/ 2022年05月14日 08:54/ 0 赞/ 364 阅读

相关【CSS】图像透明/不透明

实例1 - 创建一个透明图像 CSS3中属性的透明度是 opacity。首先，我们将向您展示如何用CSS创建一个透明图像。正常的图像 ![在这里插入图片描

骑猪看日落/ 2022年03月21日 14:46/ 0 赞/ 323 阅读