0

尝试body在此页面上复制此 CSS 定义:

div{

    cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEr0lEQVRYR83YXWgcVRQH8P/Zze5km3YbMZ/7Edxq6lcrFPrSaBL6Iiai+BSKgiBCLfjgi4pNsRKrgTbgU0HUor6FKiKixlakuzO7CaVExYogjTVlJps2ia2RhthkZ+6Rmc2GzWZ3Z2a7abyvd+ac35x7z3Bn6OLPc881NAY/BuFzQ/BANFo7gf/RICWhGsFgwNPUFLRYBEwz83ED0kfRKP272VZKJqaGGeJAMBhADrmC0gkkE+NIc8Q3TkTGZmAplUrfL3TjdzN5EWTOdBPASXj874VC9NedhJKZLJnQphncaoO0XAz86mF+oyUifU9E+kZjs0BZfZkZJ3PJylQy37NIwGl4xdutrYErGwW1gPH4ZK2XvOYy1rhEZi9nTBLRwPV53/CuXbRcTawFNIciq2fBeDw/uMNK5t+iM3DGy+hvjvh/IyJxu9hV4Jic3qOz8VNhwAqQuRB/Axhayvjfj8VovlLoKpCZPUlZuw6gvopIawMwcIEhDofDtbLbqq4CrWVWtKMQPFDsaW+jkvnhbgJ0yqdnhhrvqbvqpKprgPH4ZL2XvObSFB1VQmbbCrhEwJstYf+X5V5Xa4DZZtHGwLzvDiBzKZZA+KJG8FuNEekyEZn41bEOmEpMdwroSrnyV7GSBWloBiwGfbXSJ42NZL72zLPB2rHSLDcAbN8cpJWVGRQXrD+/DmjOphTthBD8mt0m3rhK5jLzXFHgeHy6YZH02WIVrvIryKYG9ENRoHlXUtYuMvNuuyqa89WvJM0w8SuhkP+zksBUSusROo84AVYR+aeAOBgO157LdXNJ4EqzLAAIbDiSMA6iQ6GQ/8fCXCWBK8v8ATMfdAp0W0kGnRMsDpX7DioLTKXUkNAx5aRZ8h/CwZ68UZPJPNwU23rN7uHLAq0qKuofLHCvXSDX3c34KhSVnrGLawscVdQDhsCwXaBi83aVZOCbcER6qlxsW2Cx07YbrB2SgK9bI9LTpWLaArPNop5mRp8bmKs9WWa5HQHPy1r7MvOlSoGOursE0hHQTKAkVBVAdEORwEgoIj2Zn8MxMCWnXxRsnLodoKNKEs6EwlJPLo9j4MTEhHQ1LZlnNJ8D5D/ljmt2jQPgu1BE6jXzOAZayyxr34LZurHc8Po8ezjDzwqUPrLZIb3L/pbmHTTjCnhe0R5ZFvxL2fcW0WRnd3SHeU0qoZ2oEHm5NezfaX4BugIyMyVlzTwnNpRC1njwREdX29ncfFLRjrPg10tdv66SjMkl3f9QLEa3XC+xVRVZfVUwhkoknOvsjjYXfvikFPVdIdBviyzAVQSMx2e3eumW2QSewoReD154tKvt02KQpDz1DrM4Uhq55cr2u+5+MFc5112cHzgpawozdxYkW7g2G63v6yv9ozOlqINC4HAhkgBNZ2Pn/v0xa1nzh6s9mLtxdHRqn5ERY/mBPB4cfayr7ZhdhyuKOog8JBPSPh+1d3REi/5urgiYPW2r8wBtWwFlFhaXtvX2ti/ZAc35UXnqmMGiH4T0lrqaB/buDS2Wuq8ioNUseRufiD7s7I6+5ASXu2ZkZELq6blvubChqrLEZpCxMS1gZGD+rvMH6ry7y1XBDbzw2v8AzYPIODUE9pYAAAAASUVORK5CYII="), auto !important;
    height:200px;
    width:200px;
}
<div>hover</div>

自定义光标有效,但未呈现为视网膜图像。它被渲染为一个模糊的、100% 大尺寸的图像。

有没有办法强制它显示为视网膜图像?(我尝试了 Chrome 和 Safari)

4

2 回答 2

0

这是一些CSS。我刚刚将您的 PNG 转换为 SVG 并调整了它的大小。随意对此进行解码并在 XML 中调整 SVG 的大小。

div{

    cursor: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDMyIDMyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMiAzMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+ICA8aW1hZ2UgaWQ9ImltYWdlMCIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB4PSIwIiB5PSIwIg0KICAgIGhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQ0FBQUFBZ0NBTUFBQUJFcElyR0FBQUFCR2RCVFVFQUFMR1BDL3hoQlFBQUFDQmpTRkpODQpBQUI2SmdBQWdJUUFBUG9BQUFDQTZBQUFkVEFBQU9wZ0FBQTZtQUFBRjNDY3VsRThBQUFDaTFCTVZFVkhjRXpTeit6bDVQam01UG5tDQo0dmpqM2ZibTQvbkJ2dUhsNC9qbTVQbm80L3JtNC9uQ3dPTFF6K3ZtNVBubTVQbm01UG5tNVBuazVQcm01UG5uNVBuRHdPUEF2dUhSDQp6K3ZtNVBubTQvam00L2puNVBubjVQamw0L3JGeE9IQ3dPTEF2dUhtNVBubDQvam01UGpsNC9qbTR2ckN3T0xDd09MQXZ1SG00L2psDQo1UGptNC9ubDQvbmw0L2pGd3VUQ3YrTEN3T0xsNC9ubTVQamw0L25sNVByazQvakR3ZUhEd09MbTQvam00L25tNC9ubTVQakJ3ZUxCDQp2K0xsNVBubTQvbm00L2ptNC9uQnYrSEJ3T0xCditIbDQvbmw0L2ptNVBqbTVQbm01UGp3NHZiQ3dPUEN3T0xtNC9qbTVQbmw0L25tDQo1Zm5rNWYzQ3dPTER3ZVBCditIbTQvbm00L2ptNVBubDQvYmwwdkxDd09MbDVQam01UGptNVBqQ3dlTER3T0xCditMbDQvbmw1UG5tDQo1UHZFdytQQ3dlTEN3T0xtNVBubDQvaS92dUxDd09MbDQvbmw0L25sNVBqbTUvckR3ZVBDditMQ3YrTG00L2psNC9uaDQvcm00L2puDQo0UGZEd2VIbDQvbkN3T0hDd09IbTQvbm00dmpDd09MbDQvbm00dm5DditMbDQvbm01UG5KdytmQ3dPTEN3T0xCd09MQnYrTEN3T0xDDQp3T0xtNHZyRHdlTEV3dVBDd09MQnYrSEN3ZUxDditMQndPTEN3T0xDd09MRnd1UEN3T0xsNC9uRHdPTEN3T0hDditMRncrTEN3T0xtDQo0L25Ed2ViUHpldlN6K3pEd2VQQ3dPTEZ4T0xDd2VMQ3dPSER3ZUhEdnVQQndPSEV3dVBZMXZUNitQL3E2UDdRenZQeThQL3Q2Ly9GDQp3K2JwNS8zcjZmL3U3UC9NeWUzUnordm01UG4xOC8vSXh1bmw0L2p6OGYvQXZ1SEd4T2ZvNXZ2czZ2L281L3pKeCt2Q3dPTHY3Zi80DQo5Zi9Ed2VQUXp2TEV3dVhzNmYvdzdmL096UEQwOGYvTXl1N0J2K0hMeWUzdjdQL3I2ZjdOeSsvSHhlalQwZmJMeWV6THlPekt5T3ZLDQp5T3pGdytYTHl1Ny8vLytxN0R0eUFBQUFxWFJTVGxNQTIrYVRYd1lCNk11VUpRT1U5UDN4eWxFU0JRSmYvZjc4OG9JOUNRSUV5L3YrDQovclYwSXBMOS92cjczS3hLSWZEKytPQjdIQVFCeHY3OCsweE0vZjdTaFVNUTYvNysvUG04Y1FoNSt2bnJwekVMQXpuOC92MzdVUUtyDQovdjMxQlczNy9JZ25GdFg4N1k0Rm8vM1dpUkEzOVA3VWFSamRHMlBvK3Y3a0wvdmlMa0xqTUE2N2QvNysydGNYQWluaCtuM1IvTEhqDQpMTXh2VVBrSkhzcHhISEVEZmJNZGN6R21EQjg4WVZIVVRBQUFBQUZpUzBkRTJBQU5SNjRBQUFBSmNFaFpjd0FBQ3hJQUFBc1NBZExkDQpmdndBQUFBSGRFbE5SUWZsQlFZT0NqbklvcjIxQUFBQ2hVbEVRVlE0eTNXVGlWdE1VUmpHUDltTGthMlphSEV1bWluSlFVMkZ4amIyDQprR21VWFZGRDJjcWVKSVRRUW5heWxiMnBHWk5PaTJsMDJpeUpyaEwvam5ObnVYTmJuUHM4OXpuM2VYL1ArZDczKzg2RklSNURodzBIDQpHQUgvV3lQZlZSaEhqZllVdGw2RFVtTXF4OHFxVE9POHgwOWdIeE1uRFFRbW0zM2tDdGw3UzdYdmxLbCtEUEh2RHdRRWZwaFdneEFuDQpJN1hWMDJmTUhLUkdVSjFTVlVOUVBRb09hYWlkRlRyYjdrWjZUdGdjTS83SUNJNXd3U0dtaHJuejVvZEhzRkplTGwwTmtWWXNFS1FlDQprYWpvQlkwVzI2ZlFoZUVBRVNLeXFDbUdPZ21PYURpa2lXcHVXYnhrS1lqTldiYThWWXVwbldEUENnYXRYR1dyOEYyOVppMFQ3Ym5YDQp0Y1ZTTjBFSUlwcm85WTBOWk1QR3VFMU0xa0Y4dXg1cnFaUkFtelVKaWNUeStZdjNGdUdFcmR1K3h0SStCQ0hiRVVFN0ZOeTNuVXpmDQpCYnM3a2pEK0xpVTBSSk9jWURTUlBYdnRRVk5TbXd5VXVna3VpaVFITjF2MjdROTN4RWlEOUU0OWxoQ0VIUGpSY3ZEUVlhYjVPM3AxDQpKS01kWjdvSmxQRHo2TEhqa2t1aWhsUXJhNFZJY0RMamlaUGdKNTNZcVRvbHBXNmlYbUU2SFFjUkVpQWxpNTdCSW9FRUl2dHNIeUtvDQpLNGQxazJaU1ZrcmxJTTdsdWdrZG5PK0lGVnhncXRRTEJMc2ZDdHVGaStBbHVzeTcxSmxqMTgyODNqbVhSSnRIbkJna0RTNVhabDNKDQoxeXI1cTlmcTlNTDBoU3EyN091dUdnVlFXTVFiS0M3K2RTUHZabmNKcFNvNVltbXJQRVdUYVhDckswZHI0Ry9mZ2JDN1BVbUNENW1zDQorWjQ3UlFIY2Y5Q0tTMzZudzBONFZOcGJqS21QM1BSWTJpbzFGUEhLUHhtRm9OYkJrOUxlSkJ6VDh4U2U5Ym4vejNrRFg4WkFGcm84DQpzTnZ3OTBVL0hjcXQrVTB2blcwcGoyd2JvRVBBcTY2eUFKZWoxMjhHL0dFRkVOLzZscjJkamx6ckgxUzROZ1VZUHRrSkFBQUFKWFJGDQpXSFJrWVhSbE9tTnlaV0YwWlFBeU1ESXhMVEExTFRBMlZERTBPakV3T2pVM0t6QXdPakF3WjlDQ3BnQUFBQ1YwUlZoMFpHRjBaVHB0DQpiMlJwWm5rQU1qQXlNUzB3TlMwd05sUXhORG94TURvMU55c3dNRG93TUJhTk9ob0FBQUFBU1VWT1JLNUNZSUk9IiAvPg0KPC9zdmc+DQo="), auto;
    height:200px;
    width:200px;
}
于 2021-05-06T14:18:36.707 回答
-2

是的,使用 SVG 完全可以做到这一点,它可以在任何像素密度、标准 (@1x)、视网膜 (@2x) 甚至 4k 和 8k 显示器 (@3x、@4x+) 的屏幕上以清晰的清晰度显示。

您也不必使用 Base64,不依赖 Base64 可能会更容易。这是一个没有 Base^4 的示例,我只是通过 URL 将光标 SVG 图像拉入其中。我在第一个示例下方还有一个动态 Base64 示例,因此请向下滚动。

div {
  cursor: url('https://assets.codepen.io/1580009/stackoverflow-67356313-cursor.svg'), auto;
  height: 200px;
  width: 200px;
}
<div>hover</div>

如果您希望对您的 SVG 进行 Base64 编码,那也可以,尽管它并不总是高效(可能不是 Base64 SVG)。下面是一个动态使用 Base64 的例子。为了这个示例,我已将 SVG 本身添加到 HTML 的主体中,以及可用于控制光标大小的字段。当您调整输入字段的光标大小时,Base64 字符串将自动为更新的光标大小重新计算新的 Base64 字符串,并在悬停 div 上重写该样式。

const input = document.querySelector('input'),
      svgCursor = document.querySelector('svg#cursor'),
      hoverDiv = document.querySelector('div');

const setCursor = (size = 16) => {
  svgCursor.setAttribute('width', size);
  svgCursor.setAttribute('height', size);
  const base64cursor = window.btoa(new XMLSerializer().serializeToString(svgCursor));
  hoverDiv.style.setProperty('cursor', `url('data:image/svg+xml;base64,${base64cursor}'), auto`);
};
setCursor();

input.addEventListener('change', () => setCursor(input.value));
div {
  margin-top: 20px;
  height: 200px;
  width: 200px;
  border: 2px dashed #f00;
}
svg#cursor {
  display: none;
}
<label>Cursor size: <input value="16" type="number"></label>

<div>hover</div>

<svg version="1.1" id="cursor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" width="16" height="16"><polygon fill="#D0CBE7" points="0,0 13,32 17,23 25,32 32,25 23.7,17.1 32,13 "/><g><polygon fill="#EDE9FA" points="24,17 32,13 0,0 29,28 32,25"/></g></svg>

于 2021-05-11T16:32:14.853 回答