【问题标题】:Make background transparent after box-shadow在 box-shadow 之后使背景透明
【发布时间】:2021-03-08 13:16:14
【问题描述】:

我想在悬停元素后移除背景,(使其透明)

Background box image

基本上让阴影覆盖白色背景。我尝试将背景设置为无、透明、移除边框和轮廓,但没有任何效果。

a {
  color: rgb(220, 20, 120);
  text-decoration: none;
  border: none;
}

a:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
}
<a href="#">CLICK ME</a>

【问题讨论】:

    标签: css


    【解决方案1】:

    a {
      color: rgb(220, 20, 120);
      text-decoration: none;
      border: none;
    }
    
    a:hover {
      text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.9);
    }
    <a href="#">CLICK ME</a>

    【讨论】:

    • 谢谢,在我将此标记为答案之前,这是确切的 RGB 属性吗?
    • 不客气!您可以以任何格式指定任何颜色,即使是您使用 rgba(0, 0, 0, 0.4) 或 rgb(220 20 120) 或 #db1478 的格式。如你所愿 =)
    【解决方案2】:

    a {
      color: rgb(220, 20, 120);
      text-decoration: none;
      border: none;
      transition: all 0.5s ease; // FOR SMOOTH HOVER EFFECT
    }
    
    a:hover {
      text-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
    }
    <a href="#">CLICK ME</a>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2011-03-08
      • 2014-05-07
      • 2020-11-20
      • 2018-03-21
      • 1970-01-01
      • 2011-07-24
      • 1970-01-01
      相关资源
      最近更新 更多