连接图片下怎么放一个播放按钮
日期：2014-05-16 浏览次数：20365 次
连接图片上如何放一个播放按钮
如图，在连接图片上放一个播放按钮以此来表示这是个视频连接， 怎么将播放按钮放在这个图片上，求指教，初学者~
------解决方案--------------------
1. position:relative; position:absolute;的混合运用。
2. 图片的居中定位技巧。
3. background-position的运用。
如图，在连接图片上放一个播放按钮以此来表示这是个视频连接， 怎么将播放按钮放在这个图片上，求指教，初学者~
------解决方案--------------------
1. position:relative; position:absolute;的混合运用。
2. 图片的居中定位技巧。
3. background-position的运用。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test-center-img</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font:12px/2 arial;background:#fff;}
.a{width:300px;height:150px;position:relative;}
.b{position:absolute;top:50%;left:50%;margin:-20px 0 0 -15px;width:40px;height:30px;background:url(http://img.my.csdn.net/uploads/201212/09/1355066610_1245.jpg) 50% 50% no-repeat;border-radius:5px;display:block;}
.b:hover{background:#cc0;}
</style>
</head>
<body>
<div class="a">
<img width="100%" height="100%" src="http://img.my.csdn.net/uploads/201212/09/1355066610_1245.jpg" alt="">
<i class="b"></i>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
