首页 > 其他分享 >鼠标滑过图片背景透明黑遮罩样式

鼠标滑过图片背景透明黑遮罩样式

时间:2022-11-03 11:35:49浏览次数:36  
标签:遮罩 鼠标 height 滑过 hidden font border overflow 200px

.user-info-head {
  position: relative;
  display: inline-block;
  width:150px;
  height: 200px;
  overflow: hidden;
  border: 4px solid white;
  img{
    width: 150px;
    height: 200px;
    border: 0;
    overflow: hidden;
  }
}

.user-info-head:hover:after {
  content: '+';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 44px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 200px;
  text-align: center;
  overflow: hidden;
  // border-radius: 50%;
}
 <div class="user-info-head><img v-bind:src="options.img" title="点击上传头像" /></div>

 

标签:遮罩,鼠标,height,滑过,hidden,font,border,overflow,200px
From: https://www.cnblogs.com/ddqyc/p/16853872.html

相关文章

  • 理解opengl坐标变换(从逆变换入手)--实现鼠标点击发射射线的算法
    首先上结果(不会在博客园传视频、具体流程是鼠标点击屏幕上的任意一个点、向此处投射一条射线):   实现的方法:首先认清楚什么是一条射线、由于我们不是真的要画一条......
  • ubuntu不显示鼠标
    原因:ubuntu系统默认开启多显示器,鼠标会去到另一个显示器(就算用户实际就一个显示器,系统也会当成两) 解决方法:方法一:鼠标一直向左移动,就能看到了。 方法二:设置......
  • GLFW3鼠标点击窗口时记录鼠标位置代码(附赠 学习 GLFW 的方法)
    1.通读 glfw3.h、先不看注释、只看API、认清楚这个库总共有哪些功能(差不多20min)就可以解决2.去官网文档:比方说、我想实现鼠标点击窗口的时候、把鼠标的坐标打......
  • 关于罗技鼠标在m1 mac上卡顿,飘逸的问题
    最近发现公司发的罗技鼠标出现卡顿,漂移的现象,就是滑动的时候,鼠标突然卡了一样,然后出现在另一个地方。以为是鼠标坏了,又买了个新的M720。连接蓝牙的话,不丝滑;优联连接的话......
  • 使用AHK将win修改为鼠标中键
    在使用UGNX绘图时,由于多数鼠标中键与滚轮为同一物理按键,且不方便按下,因此使用AHK将左win键改为鼠标中键AHK安装ahk是免费且开源的,大小仅有3MB,可在官网直接下载。官网......
  • C# 鼠标帮助类
    usingSystem.Drawing;usingSystem.Runtime.InteropServices;usingSystem.Windows.Forms;namespaceZB.QueueSys.Common{publicclassMouseHelper{......
  • (二)Three光线检测-实现摄像机向鼠标点击位置滑动动画
    (二)Three.js光线检测摘要:使用three.js中的光线检测Raycaster(),实现一下效果:通过点击处的坐标,修改摄像机位置,实现摄像机由远及近的过渡动态效果(由远景到近景)1、鼠标点......
  • Selenium4.0+Python3系列(四) - 常见元素操作(含鼠标键盘事件)
    一、写在前面上篇文章介绍的是关于浏览器的常见操作,接下来,我们将继续分享关于元素的常见操作,建议收藏、转发!二、元素的状态在操作元素之前,我们需要了解元素的常见状态。......
  • 伪类语法和设置鼠标形状
      伪类语法写在头部内写一个a标签在浏览器展示的效果 设置伪类语法(该种是当鼠标停留在其上时的样式)  浏览器展示的效果(当鼠标悬浮其上的样式)  a:lin......
  • 最小化及关闭远程桌面后键盘与鼠标仍处于可交互状态
    默认情况下,当用户没有在Windows上执行任何输入(没有鼠标键盘等的输入)并保持一定时间后,Windows会自动切换到锁屏模式(或屏保模式),甚至待机。一般情况下,这样不会有任......