在鼠标指针下使用 JS 或 CSS 更改图像不透明度？
Posted
技术标签:
【中文标题】在鼠标指针下使用 JS 或 CSS 更改图像不透明度？【英文标题】：Changing image opacity with JS or CSS under mouse pointer? 【发布时间】：2015-02-18 16:11:21 【问题描述】：我想在网页上有一个图像，它会在鼠标悬停时变得透明，但仅在离鼠标指针最近的某个区域透明，用指针移动该区域。
使用 CSS 可以轻松实现简单的不透明度过渡：
<style type="text/css">
img.transparent
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
img.transparent:hover
opacity: 0;
</style>
<img class="transparent" src="1.jpg">
这使得图像在鼠标打开时很好地消失并在鼠标离开时重新出现。
但是我想要达到的效果只是在鼠标指针附近的某个区域。这样当指针在图像上移动时，指针下总会有透明区域。
有没有办法通过 CSS 或 JS 来实现？
谢谢！
【问题讨论】：
如何制作一个具有白色背景的自定义光标并在您将鼠标悬停在图像上时切换到该光标？ 你的意思是看到通过一个元素？不使用 CSS，我认为 JS 也会很时髦。 答案或纯 javascript 中是否允许使用 jQuery？ 扩展 philtune 的建议。类似jsfiddle.net/oo63ydny/21 @TomKriek，我可以在网上发布的任何内容。最好不花钱。 【参考方案1】：您可以使用遮罩来获得它。它的支持有限，但提供的正是您想要的
所需的 CSS
#test
top: 0px;
left: 0px;
-webkit-mask-position: -20px -20px;
-webkit-mask-size: 200px 400px;
-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 32px, rgba(0, 0, 0, 1) 38px);
background-color: white;
border: solid 1px red;
width: 200px;
height: 200px;
background-image: url('http://placekitten.com/g/200/300');
body
background: repeating-linear-gradient(45deg, lightgreen 0px, white 50px);
还有一些脚本让它移动
document.getElementById("test").addEventListener('mousemove', mouseMove, false);
function mouseMove (event)
var ele = document.getElementById ('test');
ele.style.webkitMaskPositionX = event.offsetX - 100 + "px";
ele.style.webkitMaskPositionY = event.offsetY + 200 + "px";
demo - only webkit
【讨论】：
当我在最新版本的 Chromium 上测试它时，这个解决方案似乎将遮罩包裹在边缘，我想这是不受欢迎的行为。 webmup.com/tTn8y/vid.webm【参考方案2】：按照 vals 的建议，使用（任意）掩码。下面是一个矩形遮罩的演示，尽管它可以很容易地修改为您想要的任何形状。此版本适用于最新版本的 Firefox 和 Chromium，并允许通过 SVG 元素实现更复杂的形状。
请注意，这是非常糟糕的代码。如果您想在任何项目中使用它，则需要编写它，但想法就在那里。
演示：http://jsfiddle.net/WK_of_Angmar/f8oe7hcq/
<!DOCTYPE html>
<html>
<head>
<script type="application/javascript">
window.addEventListener("load", function()
var img = document.getElementsByTagName("image")[0];
var imgPos = img.getBoundingClientRect();
var imgX = imgPos.left;
var imgY = imgPos.top;
var rect = document.getElementsByTagName("rect")[1];
var rectHalfWidth = rect.getAttribute("width") / 2;
var rectHalfHeight = rect.getAttribute("height") / 2;
img.addEventListener("mousemove", function(e)
rect.setAttribute("x", e.clientX - imgX - rectHalfWidth);
rect.setAttribute("y", e.clientY - imgY - rectHalfHeight);
, false);
, false);
</script>
<style>
svg
width: 320px;
height: 166px;
body
background-color: red;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Mozilla_Firefox_logo_2013.svg/226px-Mozilla_Firefox_logo_2013.svg.png");
image:hover
mask: url("#cursorMask");
</style>
</head>
<body>
<svg>
<defs>
<mask id="cursorMask" maskUnits="objectBoundingBox" maskContentUtils="objectBoundingBox">
<g>
<!-- the SECOND rect element is what determines the transparent area -->
<rect x="0" y="0" fill="#FFFFFF" />
<rect x="0" y="0" fill="#000000" />
</g>
</mask>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/d/d4/Firefox-33-xfce.png" />
</svg>
</body>
</html>
【讨论】：
你是对的，将 css 掩码更改为 svg 掩码可以获得 Firefox 兼容性 太棒了！谢谢！我想应该有某种面具，但不了解当今的技术，无法通过谷歌搜索。 我想象的是一种褪色的视口进入底层。可以通过您的代码轻松实现：jsfiddle.net/j6fv5Lk9/35以上是关于在鼠标指针下使用 JS 或 CSS 更改图像不透明度？的主要内容，如果未能解决你的问题，请参考以下文章
CSS：圆角 + 不透明度 = 图像在 Firefox 19 中消失