一张图片我想在上面点击不同地方会出现不同的效果,因为后续效果是根据div来的,所以请教下什么方法可以把一张图片切成六个div,这个图片要相对位置还是绝对。
7条回答 默认 最新
- 俊刚、 2016-11-03 05:45关注
<!DOCTYPE html> <html> <head> <title>background-clip</title> <style type="text/css"> *{margin:0px;padding:0px;} .div1 img{position:absolute;clip:rect(0px 98px 106px 0px);border:2px solid white;} .div2 img{position:absolute;clip:rect(0px 198px 106px 100px);border:2px solid white;} .div3 img{position:absolute;clip:rect(0px 298px 106px 200px);border:2px solid white;} .div4 img{position:absolute;clip:rect(108px 98px 214px 0px);border:2px solid white;} .div5 img{position:absolute;clip:rect(108px 198px 214px 100px);border:2px solid white;} .div6 img{position:absolute;clip:rect(108px 298px 214px 200px);border:2px solid white;} </style> </head> <body> <div class="div1"><img src="img/bg_1.jpg" width="300px" height="216px" /></div> <div class="div2"><img src="img/bg_1.jpg" width="300px" height="216px" /></div> <div class="div3"><img src="img/bg_1.jpg" width="300px" height="216px" /></div> <div class="div4"><img src="img/bg_1.jpg" width="300px" height="216px" /></div> <div class="div5"><img src="img/bg_1.jpg" width="300px" height="216px" /></div> <div class="div6"><img src="img/bg_1.jpg" width="300px" height="216px" /></div> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决评论 打赏 举报无用 1
悬赏问题
- ¥20 要这个数学建模编程的代码 并且能完整允许出来结果 完整的过程和数据的结果
- ¥15 html5+css和javascript有人可以帮吗?图片要怎么插入代码里面啊
- ¥30 Unity接入微信SDK 无法开启摄像头
- ¥20 有偿 写代码 要用特定的软件anaconda 里的jvpyter 用python3写
- ¥20 cad图纸,chx-3六轴码垛机器人
- ¥15 移动摄像头专网需要解vlan
- ¥20 access多表提取相同字段数据并合并
- ¥20 基于MSP430f5529的MPU6050驱动,求出欧拉角
- ¥20 Java-Oj-桌布的计算
- ¥15 powerbuilder中的datawindow数据整合到新的DataWindow