我需要这样的东西
但在图像上方,这是我的第一次尝试,但它不起作用
http://jsfiddle.net/wo8gbhx3/17/ http://jsfiddle.net/wo8gbhx3/17/
这是我的标记(现在)
HTML
<div class="testing">
<ul>
<li class="selected unavailable">
<a href="#">
<img src="http://placehold.it/25x25"/>
</a>
</li>
</ul>
</div>
CSS
.testing ul {
list-style: none;
}
.testing ul li {
width: 25px;
height: 25px;
position: relative;
}
.testing ul li img {
width: 100%;
height: 100%;
}
.unavailable:before {
position: absolute;
border: 2px solid green; /* Just for testing */
background:repeating-linear-gradient( 150deg, #FFF, #FFF 16px, #000 18px);
}
你需要这样的东西
.testing ul {
list-style: none;
}
.testing ul li {
width: 250px;
height: 250px;
}
.testing ul li img {
width: 100%;
height: 100%;
display: block;
}
.unavailable {
position: relative;
}
.unavailable a:after {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
border: 2px solid green;
/* Just for testing */
background: repeating-linear-gradient(150deg, transparent, transparent 16px, #000 18px);
z-index: 2;
}
<div class="testing">
<ul>
<li class="selected unavailable">
<a href="#">
<img src="http://placehold.it/200x200" />
</a>
</li>
</ul>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)