css实现背景半透明文字不透明的效果示例
发布时间：2018-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>
颜色可根据调色板自行调色
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
DIV半透明实现，使用CSS实现DIV成半透明效果，CSS实现层与背景半透明效果。本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2021-11-30
这篇文章主要介绍了css3实现背景图片半透明内容不透明的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小2021-04-13
这篇文章主要介绍了纯css实现背景图片半透明内容不透明的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-12- 实现背景色透明或半透明但内容不透明，在某些情况下还是比较实用的，下面有个不错的示例，感兴趣的朋友可以参考下2013-11-29
- 在某些情况下可能会需要背景半透明文字不透明这样的效果，实现起来并不复杂，通过滤镜便可做到，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-05
在页面布局时，为了给用户不一样的视觉效果，需要设置div的背景颜色为半透明状态，本文就来介绍一下css实现背景颜色半透明的两种方法，感兴趣的可以了解一下2021-12-03
最新评论