css 背景透明，文字不透明

最新推荐文章于 2023-12-19 15:00:19 发布

小土為尘

最新推荐文章于 2023-12-19 15:00:19 发布

阅读量702

点赞数

分类专栏： code 文章标签： css html 背景透明

本文链接：https://blog.csdn.net/dwc2011/article/details/52489471

版权

code 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css 背景透明、文字不透明实现代码

关键点：1. 在显示文字标签兄弟节点上加一个块级元素 div 用于设置背景为透明；2. div 和 ul 需要绝对定位，position 设置为 absolute。代码：

<!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>
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=23)"> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>背景透明，文字不透明</title>
    <style type="text/css" media="all">
        html, body{
            width: 95%;
            height: 95%;
            background: url(bg.jpg);
        }
        .container{
            height: 100px;
            width: 240px;
        }
        .container div{
            width: inherit;
            height: inherit;
            position: absolute;
            background-color: black;
            opacity: 0.1;
            filter: alpha(opacity=10);
        }
        .container ul{
            width: inherit;
            height: inherit;
            position: absolute;
        }

    </style>
</head>
<body>
    <div class="container">
        <div></div>
        <ul>
            <li>我是文字, 不透明...</li>
            <li>我是文字, 不透明...</li>
            <li>我是文字, 不透明...</li>
        </ul>
    </div>
</body>
</html>

小土為尘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 背景透明，文字不透明

css 背景透明、文字不透明实现代码关键点：1. 在显示文字标签兄弟节点上加一个块级元素 div 用于设置背景为透明；2. div 和 ul 需要绝对定位，position 设置为 absolute。代码：背景透明，文字不透明 html, body{ width: 95%; height: 95%
复制链接

扫一扫

专栏目录