Home > Article > Web Front-end > Example of using css to achieve the effect of background translucent text being opaque
Example of using css to achieve the effect of background translucent text being opaque
- 不言Original
- 2018-05-09 11:05:411756browse
This article mainly introduces the example of css implementation of background translucent text opaque effect. It has certain reference value. Now I share it with you. Friends in need can refer to it.
This article introduces the css implementation. An example of the effect of background translucent text being opaque is shared with everyone. The details are as follows:
The effect is as follows:
<!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 p{
height: 55px;
border-bottom: 1px solid #FFFFFF;
line-height: 55px;
}
.aside p font{
font-weight: 800;
}
.aside p span{
font-weight: 800;
margin-left:18px;
}
</style>
</head>
<body>
<p class="aside">
<p>
<font>留置室1 </font >
<span>10人</span>
</p>
<p>
<font>留置室1 </font >
<span>4人</span>
</p>
<p>
<font>留置室1 </font >
<span>12人</span>
</p>
<p>
<font>留置室1 </font >
<span>6人</span>
</p>
<p>
<font>留置室1 </font >
<span>8人</span>
</p>
</p>
</body>
</html> The color can be adjusted according to the palette
The above is the entire content of this article. For more related content, please pay attention to the PHP Chinese website.
Related recommendations:
CSS to realize sprites and font icons
CSS to realize the dynamic effect of mouse movement in and out
The above is the detailed content of Example of using css to achieve the effect of background translucent text being opaque. For more information, please follow other related articles on the PHP Chinese website!