Question

我想在网页上有一个图像，它会在鼠标悬停时变得透明，但只在最接近鼠标指针的某个区域透明，用指针移动该区域。

使用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实现呢？

谢谢！

Answer 1

如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" width="320" height="166" fill="#FFFFFF" />
                    <rect x="0" y="0" width="100" height="100" fill="#000000" />
                    </g>
                </mask>
            </defs>
        <image width="320" height="166" xlink:href="https://upload.wikimedia.org/wikipedia/commons/d/d4/Firefox-33-xfce.png" />
        </svg>
    </body>
</html>

Answer 2

您可以使用遮罩来获得此效果。它的支持有限，但提供了你想要的东西

所需的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

在鼠标指针下使用JS或CSS更改图像不透明度？

2 个答案: