CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容
2024-09-26 01:16:15
- CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容，DiV透明其实挺简单，主要是为background定义opacity属性，一般这个是最大值是1，数值越接近1，则越不透明，也就是越小越透明，颜色可以自定义。这样可以让图片上的文字更清淅，在一些图片特效中我们会见到这种效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS背景透明文字不透明</title>
<style type="text/css">
.item{width:500px;font:17px '微软雅黑';height:300px;margin:0 auto;position:relative;}
.hi,h3{position:absolute;left:0;bottom:0;width:100%;height:36px;}
h3{line-height:30px;color:#fff;margin:0;z-index:1;}/*加入z-index值，文字就不会透明了*/
.hi{background:blue;opacity:0.3;}/*背景透明*/
</style>
</head>
<body>
<h1>Div背景透明文字不透明</h1>
<div class="item">
<p><a href="http://www.codefans.net/jscss/"><img src="http://www.codefans.net/jscss/demoimg/wall5.jpg" /></a></p>
<h3>你看！这行文字下面的背景透明了，而文字没有透明。</h3><div class="hi"></div>
</div>
</body>
</html>
最新文章
- 使用 yum 安装 virtualbox 虚拟机
- JS 中的事件绑定、事件监听、事件委托
- JQuery中的extend函数
- Spring - 配置Bean - 自动装配 关系 作用域 引用外部属性文件
- 暑假热身 A. GCC
- windows中断与共享的连接（samba）
- SDUT 1269 走迷宫（BFS）
- TDirectory.GetLastAccessTime获取指定目录最后访问时间
- RPMForge——Quick Start build system
- unrecognized font family "iconfont2"
- 用ASP.NET Core 2.0 建立规范的 REST API -- 预备知识
- Linux 系统调用sysconf
- node+mongoose+vue
- Java:终于找到了在alloy中的JFileChooser中的弹出式菜单不显示文字的解决办法
- Block 语法
- e784. 监听对JList选择变动
- 无废话网页重构系列——（2）来套Web重构装备
- ClouderaManager启动NodeManager失败！报错Failed to initialize container executor
- Visual Studio Code常用设置
- 70. Climbing Stairs（动态规划 爬台阶，一次只能爬1,2两节）