css实现背景半透明文字不透明的效果示例

前端  /  管理员 发布于 7年前   201

本文介绍了css实现背景半透明文字不透明的效果示例，分享给大家，具体如下：

效果如下：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>html{    background: #6a8db1;}.aside{        background-color:rgba(244,251,251,0.47);        border: 1px   solid  #FFFFFF;    width: 200px;    text-align: center;    color: #FFFFFF;}.aside div{    height: 55px;    border-bottom: 1px   solid   #FFFFFF;    line-height: 55px;    }.aside  div  font{    font-weight: 800;    }.aside  div  span{    font-weight: 800;    margin-left:18px;}        </style>    </head>    <body>        <div  class="aside"><div>    <font>留置室1 </font >    <span>10人</span></div><div>    <font>留置室1 </font >    <span>4人</span></div><div>    <font>留置室1 </font >    <span>12人</span></div><div>    <font>留置室1 </font >    <span>6人</span></div><div>    <font>留置室1 </font >    <span>8人</span></div>        </div>    </body></html>

颜色可根据调色板自行调色

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


  • 上一条：
    CSS实现精灵图与字体图标
    下一条：
    纯CSS实现的大型下拉菜单的示例代码

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客