鼠标悬浮显示文字半透明背景

Posted 2020-10-02 乐少007

鼠标悬浮显示文字半透明背景

鼠标悬浮头像，出现文字“上传头像”，之前都是使用< a title="上传头像"></a>这样的title来实现
现在设计稿，是在头像上面，显示的大号字体的文字，且有一层黑色遮罩层
第一想法是，多写一个层，悬浮时候，出现即可
多想一步，使用css的content:"",来实现
content后面的是双引号
针对半透明黑色背景层
background:#000
opacity:0.5
这是透明了全部（背景色和文字）
但是，我们需要透明背景色，别的不要透明
background-color:rgba(0,0,0,0.5);

http://linxz.github.io/tianyizone/hex_color.html（小志哥的小工具）
可以帮忙转换背景色的

 ===============================================================

<div class="person-msg">
     <div class="person-img">
         <a target="" href="#">
            <img src="../image/user_img.png"/>
       </a>
     </div>
</div>

================================================================

.person-msg .person-img a:hover:after {
content: "上传头像";
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
background: #000;
/*opacity: 0.3;*/
filter:progid:DXImageTransform.Microsoft.gradient(enabled=\'true\',startColorstr=\'#7F000000\', endColorstr=\'#7F000000\');
position: absolute;
left: 0;
top: 0;
font-family: MicrosoftYaHei;
font-size: 20px;
color: #FFFFFF;
z-index: 9999;
letter-spacing: 2.5px;
text-shadow: 0 1px 1px rgba(0,0,0,0.50);
}

:root .person-msg .person-img a:hover:after {
filter:none; /*处理IE9浏览器中的滤镜效果*/
background-color:rgba(0,0,0,0.5);
}

====================================================

下载链接http://files.cnblogs.com/files/leshao/shu%E9%BC%A0%E6%A0%87%E6%82%AC%E6%B5%AE%E6%98%BE%E7%A4%BA%E6%96%87%E5%AD%97%E5%8D%8A%E9%80%8F%E6%98%8E%E8%83%8C%E6%99%AF.rar