澳门博彩官网

互联网   05-08 14:27:47   作者:祈澈姑娘   我要评论

本篇文章主要介绍了css实现背景半透明文字不透明的效果示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文介绍了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实现背景半透明文字不透明效果兼容IE6

    在某些情况下可能会需要背景半透明文字不透明这样的效果,实现起来并不复杂,通过滤镜便可做到,具体实现如下,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-05
  • 背景半透明效果CSS链接样式代码

    想不想要自己的主页链接很炫呢,背景半透明的链接效果,空链接实现的链接效果,只需要定义一个特效式的CSS样式即可以实现,在需要实现的地方应用定义的CSS样式,也可以全站
    2013-02-27
  • css 背景半透明最佳实践

    透明作为一种效果增强的方案,被众多视觉设计师喜欢。但因为 IE 的原因,透明,特别是半透明,已经成为前端工程师最不愿意实现的东西
    2011-10-30

最新评论