您的位置：首页 > 其它

半透明背景，文字不透明，ie8和现代浏览器的兼容性

2016-12-29 16:29 453 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航