Question

我试图达到这个效果。

我使用了Nikolay Talanov的笔来显示效果，我尝试使用框阴影使显示圆的边缘模糊，使其看起来更接近想要的效果，但不太相似

任何人都有其他解决方案或方法让它看起来一样吗？

<div class="background">
    <div class="reveal"></div>
</div>

Css

   html, body {
       font-size: 62.5%;
       height: 100%;
       overflow: hidden;
   }

  .background {
      position: relative;
      height: 100%;
      background: #000000;
      padding: 20rem;
      text-align: center;
      background: url("http://www.wallpapers4u.org/wp-content/uploads/paper_patterns_backgrounds_textures_lines_36212_1920x1080.jpg") 50% 50% no-repeat fixed;
  }

  .reveal {
      z-index: 5;
      position: absolute;
      top: calc(50% - 10rem);
      left: calc(50% - 10rem);
      width: 20rem;
      height: 20rem;
      background: url("http://gallery.hd.org/_exhibits/textures/text-sample-of-old-novel-DHD.jpg") 50% 50% no-repeat 

  fixed;
      background-size: cover;
      border-radius: 100%;
      box-shadow: 0 0 9em 10em #ffffff inset,0 0 9em 10em #ffffff;
  }

Js

 $(document).ready(function() {
     var $reveal = $(".reveal"),
     revealWHalf = $reveal.width() / 2;
     $(document).on("mousemove", function(e) {
         $reveal.css({"left": e.pageX - revealWHalf, "top": e.pageY - revealWHalf});
    });
 });

Answer 1

你的图片不正确。但无论如何，你需要做的是应用一个面具。

例如：

@ngrx/selector

custom selectors

根据需要调整渐变。

缺点是，掩码语法仅限webkit，而且完全已弃用。对于当前语法memoization。希望足够引导你，我会用SVG做，但已经花了太多时间在这个（伟大的！）挑战。

干杯！

Answer 2

我可以使用clip-path来显示背景的一部分，而对于reveal元素，我使用径向渐变来创建阴影效果。

这也适用于内容，而不仅仅是背景图片。

以下是一个例子：

$(document).ready(function() {
  var $reveal = $(".reveal"),
    revealWHalf = $reveal.width() / 2;
  $(document).on("mousemove", function(e) {
    $reveal.css({
      "left": e.pageX,
      "top": e.pageY
    });
    $('.background').css('clip-path', 'circle(80px at ' + e.pageX + 'px ' + e.pageY + 'px)');
  });
});

html,
body {
  margin: 0;
  padding-top: 1px;
  overflow: hidden;
  background: url(https://lorempixel.com/1000/800/)
}

.background {
  position: relative;
  height: 100vh;
  color: #fff;
  text-align: center;
  padding-top: 1px;
  background: url("https://lorempixel.com/1000/1000/");
  clip-path: circle(80px at 50px 50px);
  -webkit-clip-path: circle(80px at 50px 50px);
}

.reveal {
  z-index: 5;
  position: absolute;
  top: 50px;
  left: 50px;
  transform: translate(-50%, -50%);
  width: 165px;
  height: 165px;
  border-radius: 50%;
  background-image: radial-gradient(circle at center, transparent 20%, #fff 70%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background">
  <h1>I am a title</h1>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
  <div class="reveal"></div>
</div>

Answer 3

您的代码没有任何问题。这是你使用的img src那是错的......你给了网页而不是图像......检查我的输出是否有不同的图像......

取代了这个......

background: url("http://gallery.hd.org/_exhibits/textures/text-sample-of-old-novel-DHD.jpg") 50% 50% no-repeat

有了......

background: url("http://i.imgur.com/Im9luhE.png") 50% 50% no-repeat

Codepen链接： https://codepen.io/anon/pen/vpRKOB

在悬停时显示模糊/渐变边缘的图像部分

3 个答案: