返回顶部

收藏

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

更多
<!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. 2012-11-05 21:59:42java获得随机数代码 by 怪兽狂殴奥特曼
  2. 2014-05-25 20:47:04水平居中一个不确定宽度的区块 by GauSir
  3. 2014-05-26 16:46:34文字缩略 by tsl0922
  4. 2014-06-29 11:57:59rgba兼容 by arden
  5. 2014-08-05 11:10:42通用文字和图片链接样式 by 猩猩总统
  6. 2014-05-25 16:12:14Bootstrap带输出框的分页样式 by 奔小康
  7. 2014-05-25 21:00:35User Modify让你的文本可编辑 by huwei
  8. 2014-05-26 16:59:04漂亮的链接菜单 by arden
  9. 2014-07-27 21:28:26图片填充文本 by 猩猩总统
  10. 2014-09-13 14:27:24body顶端阴影 by 龙堂修罗
  11. 2014-05-25 16:18:32代替魔鬼的text-indent:-9999px的方式。 by arden
相关聚客文章
  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-09-10 16:00:00 CSS基础和LESS入门
  5. 青鱼 发表 2015-02-03 01:50:16 学习Web基础(HTML/CSS/JS) + 服务器端技术 (LAMP)
  6. Landon Schropp 发表 2015-07-20 13:27:30 Say Goodbye to Vendor Prefixes
  7. 博主 发表 2015-07-29 02:58:04 CSS3圆角
  8. 博主 发表 2015-07-29 02:58:05 浅谈CSS中的伪元素和伪类
  9. sxwgf 发表 2015-08-09 07:57:52 CSS气泡提示框 可自定义配置箭头
  10. Leniy 发表 2015-06-02 02:09:57 正则表达式检测及生成工具汇总
  11. ayqy 发表 2015-08-18 14:34:04 iconfont图标字体
  12. David Walsh 发表 2015-08-24 01:54:21 Simple Image Lazy Load and Fade

发表评论