Question

我需要在.header部分的光标后面创建类似聚光灯的效果。

在鼠标悬停时，header_bg.png图像的圆形220px区域将变为可见。聚光灯区域会随光标移动，但图像不会 - 因此根据光标的位置，您会看到图像的不同部分。

我环顾四周但找不到任何可行的方式（或足够接近）。我对jquery不太满意，所以任何帮助都会受到赞赏。

谢谢！

这是我的HTML：

<section class="header" style="background-image: url("/img/header_erp.jpg");">
    <div class="container">
        <h1 class="large-h1 text-white">here's some text</h1>
    </div>
</section>

这是我的css：

section.header {
    padding: 0;
    position: relative;
    height: 450px;
    overflow: hidden;
    background-size: cover;
}
.header:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("/img/header_bg.png");
    opacity: 0.5;
}

Answer 1

有一篇类似的文章可能会给你一个良好的开端：

Creating a circular mouseover saturation effect

通过在他的演示中更改一点CSS，你可以将图像变黑，只显示聚光灯的位置：

我刚改变了：

background: url(http://www.forestpath.org/test/misc/img/photos/photo003-640-480-desaturated.jpg) no-repeat 0 0;

为：

background-color:black;

更新了小提琴：

http://jsfiddle.net/CkJXJ/70/

如何创建聚焦效果，在鼠标悬停时显示部分图像？

1 个答案: