返回顶部

收藏

背景透明,文字不通明的做法

更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>背景透明文字不通明</title>
<style type="text/css">
    .item{width:400px;height:300px;margin:0 auto;position:relative;}
    .hi,h3{position:absolute;left:0;bottom:0;width:100%;height:30px;}
    h3{line-height:30px;color:#fff;margin:0;z-index:1;}/*给文字设置了z-index值这样文字就不会透明了*/
    .hi{background:red;opacity:0.4;}/*透明背景*/
</style>
</head>

<body>
    <h1>背景透明文字不透明的做法</h1>
    <div class="item">    
        <p>
            <img src="<a href="http://www.hnta.cn/upfiles/20081179558239.jpg">http://www.hnta.cn/upfiles/20081179558239.jpg" />
        </p>
        <h3>你看我是不是没有透明啊</h3>
        <div class="hi"></div>
    </div>
</body>
</html>
//该片段来自于http://outofmemory.cn

标签:css,基础

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. 博主 发表 2014-06-03 00:00:00 CSS布局基础
  2. maisui99 发表 2013-01-15 02:55:38 前端的基本知识
  3. jasl 发表 2014-11-21 00:36:59 CSS 基础语法
  4. 青鱼 发表 2015-02-03 01:50:16 学习Web基础(HTML/CSS/JS) + 服务器端技术 (LAMP)
  5. 博主 发表 2015-09-10 16:00:00 CSS基础和LESS入门
  6. libo 发表 2015-01-18 16:08:54 2014年CSS报告
  7. 博主 发表 2015-03-06 03:11:19 7个你可能不知道的CSS单位
  8. 博主 发表 2013-09-13 00:00:00 JavaScript 语言基础知识点总结(思维导图)
  9. 博主 发表 2014-05-05 08:56:20 在hadoop-2.2.0基础上基于sqoop源码编译构建sqoop-1.4.4
  10. 设计 达人 发表 2015-03-24 03:47:26 10个免费开源的JS音乐播放器插件
  11. stackvoid 发表 2015-02-10 16:00:00 全面理解 Android 安全机制(Linux基础)
  12. 浅墨 发表 2013-04-05 09:26:13 编译和链接那点事