<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul li{
width: 300px;
height: 250px;
position: relative;
overflow:hidden;
}
ul li .mymark, ul li a{
width:100%;
position: absolute;
bottom: 0;
left: 0;
height: 30px;
line-height: 30px;
}
ul li .mymark {
filter: Alpha(Opacity=50)\9;
background: #000;
opacity: 0.5;
z-index: 2;
}
ul li .mytext{
z-index: 3;
display: block;
color:#fff;
text-decoration: none;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li>
<img src="http://60.212.191.130/static/admin/45/201612/Img/Img9fa3ed305f79415d9412be8ea9be5e92.jpg" alt="">
<div class="mymark"></div>
<a href="#" class="mytext">mymark和文字并列样式宽高统一，一个做背景，一个做文字</a>
</li>
</ul>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul li{
width: 300px;
height: 250px;
position: relative;
overflow:hidden;
}
ul li .mymark, ul li a{
width:100%;
position: absolute;
bottom: 0;
left: 0;
height: 30px;
line-height: 30px;
}
ul li .mymark {
filter: Alpha(Opacity=50)\9;
background: #000;
opacity: 0.5;
z-index: 2;
}
ul li .mytext{
z-index: 3;
display: block;
color:#fff;
text-decoration: none;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li>
<img src="http://60.212.191.130/static/admin/45/201612/Img/Img9fa3ed305f79415d9412be8ea9be5e92.jpg" alt="">
<div class="mymark"></div>
<a href="#" class="mytext">mymark和文字并列样式宽高统一，一个做背景，一个做文字</a>
</li>
</ul>
</body>
</html>
扫一扫
5530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
