时间戳

首页 > 解决方案 > 如何使用 CSS 为 body 和 boder 设置不同的不透明度？

html - 如何使用 CSS 为 body 和 boder 设置不同的不透明度？

问题描述

我正在尝试制作自定义光标。我正在尝试制作一个圆形光标，其中只有边框完全不透明，而其内部必须像圆环一样透明。以下是供参考的 CSS 片段：-

.app-cursor {
  z-index: 1000;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  pointer-events: none;
  overflow: hidden;
  transform: translate(0, 0, 0);
  position: fixed;
  opacity: 0;
  border: 1px solid white;
}

我面临的问题是在最后两行，要么整个光标变得透明，要么中间部分变得完全不透明，如何处理这种情况。提前致谢。

标签： htmlcss

解决方案

我解决了这个问题。

  1. 您需要取出opacity: 0;并更改border: 1px solid white;为border: 1px solid black;.
  2. 最后，您需要添加background-color: transparent;

.app-cursor {
  z-index: 1000;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  pointer-events: none;
  overflow: hidden;
  transform: translate(0, 0, 0);
  position: fixed;
  background-color: transparent;
  border: 1px solid black;
}
<span class="app-cursor"></span>

推荐阅读