我已经上传了一个40x40正方形的.png. 该广场有一个白色透明的背景.

当使用此图像作为自定义光标时,我所期望的是,将鼠标悬停在红色块上时,我会看到一个暗淡的白色透明正方形.

当我将鼠标悬停在白色方块上时,我所期望的是什么都不是,因为我认为由于透明的白色覆盖了白色,所以该正方形应该是"看不见的".

但这并不是我们所看到的,这个正方形实际上是淡淡的灰色.这种转变从何而来?我try 过使用SVG和PNG.

FIDDLE in case example is not working. https://jsfiddle.net/cx2gu5qb/.

.block {
  height: 200px;
  width: 400px;
  cursor: url('https://i.imgur.com/yuDNHeN.png'), auto;
}

.red {
  background: red;
}

.white {
  border: 1px solid black;
  background: white;
}
<div class="block red"></div>
<div class="block white"></div>

推荐答案

cursor: url('https://i.imgur.com/V8pXcSn.png'), auto;

因为阴影,你会得到不同的 colored颜色 .

我用流行的浏览器判断过这一点.结果是完全一样的.

Check the below image

enter image description here

https://jsfiddle.net/j1wnxzgu/2/

Conclusion

  • 阴影使用投影算法.
  • 在中,阴影的Alpha与图像的Alpha通道成比例.
  • 使用CSS,我们无法更改此行为
  • Select JavaScript解决方案

Html相关问答推荐

传单自定义标记(divIcon)html/css不适用

有没有可能设置div的边框宽度相对于其父宽度和高度?'

放大缩小标题在外面的图像

我能阻止浏览器跨跨区边界折叠空格吗?

连续的相同 colored颜色 单元格应位于同一列、网格框中

Firefox和Chrome在文字装饰和文字阴影方面的不同优先顺序

每个元素的CSS网格高度相等,以保持响应性

从网页中提取URL

使用CSS Flexbox时,我的图像未对齐

carousel 的垂直滚动按钮居中

如何使用*ngFor将模板从父级传递到子级

布局更改时的转换

如何在没有包装元素的情况下在React(Next.js)中呈现HTML注释

如何使元素具有粘性

为什么即使我点击其他地方,我的 contenteditable="true" 也会被激活?

在 CSS 中的 div 中获取文本以环绕其他文本?

使用 R markdown 在 html 中包含图像

如何截断一些文本并用双引号引起来?

Mediawiki css/html 信息框创建空白行

我可以将两个元素之间的所有空间都放在弹性框或网格中吗?