问题:
超链接是如何作用在图片上的,为何没有被图片给覆盖?
又没有这样引用<a href=""><img src=""/></a>
此代码是css世界中关于 任意大小图片的左右半区布局的实例。
代码代码:
<style type="text/css">
.box {
display: inline-block;/*作用就是行内编辑,耶耶耶✌弄懂了,所以box盒子内的元素占了多宽,那么box的宽度就是多宽,不占整行了。所以超链接以类来定义其的位置,是可以的,否则也会按顺序排列。*/
position: relative;/*若父级元素不设置相对定位,那么绝对定位的元素将继续向上寻找,直到body。*/
}
.prev,
.next {
width: 50%; height: 100%;
position: absolute;
top: 0;
opacity: 0.5;/*指定不透明度。从0.0(完全透明)到1.0(完全不透明)*/
}
.prev {
left: 0;
background-color: #cd0000;
}
.next {
right: 0;/*与direction有异曲同工之妙,direction是规定文本书写方向,而right与left它们则表示盒子右边和左边留空多少,也可以想其为偏移。*/
background-color: #34538b;
}
</style>
</head>
<body>
<div class="box">
<a href="javascript:" class="prev" title="上一张">上一张</a>
<a href="javascript:" class="next" title="下一张">下一张</a>
<img src="捕获.png">
</div>
</body>
运行图:
原图片没有颜色,给链接加了颜色,但我想知道为什么不会被原图片覆盖