有什么方法可以仅在悬停时对图像的一部分进行着色吗?

问题描述 投票:0回答:5

我喜欢用 HTML、CSS 甚至 jQuery 编写简单的图像绘制代码。

假设我有一个原始图像,我想让它着色,但仅限于悬停的部分(或光标所在的 10x10px 正方形或圆形图像)。

我应用了一些滤镜,用 CSS 使其灰度化,但我不知道如何仅对悬停部分(而不是整个图片)进行着色。

最佳结果的示例图像(保留彩色建议会很好,但不一定)。

enter image description here

javascript html css css-shapes
5个回答
6
投票

您可以使用

svg
mask
filter
来完成此操作。

代码笔

var img = document.getElementById('img');
img.addEventListener('mousemove', function(e) {
  document.getElementById('c').setAttribute('cx', e.clientX - img.getBoundingClientRect().left);
  document.getElementById('c').setAttribute('cy', e.clientY - img.getBoundingClientRect().top);
})
<svg id="img" width="600" height="300" viewBox="0 0 600 300">
  <defs>
    <filter id="f" filterUnits="userSpaceOnUse">
      <feColorMatrix type="saturate" values="0" />
    </filter>
    <mask id="m" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="300">
      <circle id="c" cx="-40" cy="-40" r="40" fill="white" />
    </mask>
  </defs>
  <image filter="url(#f)" width="600" height="300" xlink:href="http://www.lorempixel.com/600/300" />
  <image mask="url(#m)" width="600" height="300" xlink:href="http://www.lorempixel.com/600/300" />
</svg>


您还可以使用

radialGradient
在圆边缘获得平滑过渡。

代码笔

enter image description here

var img = document.getElementById('img');
img.addEventListener('mousemove', function(e) {
  var x = e.clientX - img.getBoundingClientRect().left;
  var y = e.clientY - img.getBoundingClientRect().top;
  document.getElementById('r').setAttribute('fx', x);
  document.getElementById('r').setAttribute('fy', y);
  document.getElementById('r').setAttribute('cx', x);
  document.getElementById('r').setAttribute('cy', y);
});
<svg id="img" width="600" height="300" viewBox="0 0 600 300">
  <defs>
    <radialGradient id="r" gradientUnits="userSpaceOnUse" cx="300" cy="150" r="400" fx="300" fy="150">
      <stop offset="0%" stop-color="white" />
      <stop offset="10%" stop-color="white" />
      <stop offset="12%" stop-color="black" />
      <stop offset="100%" stop-color="black" />
    </radialGradient>
    <filter id="f" filterUnits="userSpaceOnUse">
      <feColorMatrix type="saturate" values="0" />
    </filter>
    <mask id="m" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="300">
      <path d="M0,0 h600 v300 h-600z" fill="url(#r)" />
    </mask>
  </defs>
  <image filter="url(#f)" width="600" height="300" xlink:href="http://www.lorempixel.com/600/300" />
  <image mask="url(#m)" width="600" height="300" xlink:href="http://www.lorempixel.com/600/300" />
</svg>


2
投票

我建议避免使用 CSS 过滤器,因为 IE 根本不支持它,而且看起来也不在管道中。

我还喜欢在 Photoshop 中对图像进行灰度化,以便更好地控制色彩平衡和对比度。 (但我也是一名设计师)。

相反,我将在灰度图像上放置全彩色图像,固定彩色背景图像的位置,并使用 jQuery 移动顶部 div 的位置:

HTML

<div class="greykitty">
  <div class="colorfulkitty" style="top: 150px; left: 280px;">
  </div>
</div>

带有 Normalize.css 的 SCSS

body{
  background-color:whitesmoke;
}

div{
  height: 400px;
  width: 600px;
  background-repeat: no-repeat;
}


.greykitty{
  background-image: url("http://lorempixel.com/g/600/400/cats/10/");
}

.colorfulkitty{
    background-image: url("http://lorempixel.com/600/400/cats/10/");
  $circlesize: 150px;
  height:  $circlesize;
  width:  $circlesize;
  border-radius:   $circlesize;
  background-attachment: fixed;
  position: absolute;

}

JS 与 jQuery

$('.greykitty').mousemove(function (colorize) {
    var X = colorize.clientX;
    var Y = colorize.clientY;
    $('.colorfulkitty').css("top", (Y - 75) + 'px');
    $('.colorfulkitty').css("left", (X - 75) + 'px');
});

还有我的代码笔:http://codepen.io/fontophilic/pen/XJpVje/


2
投票

您可以将图像包装在 HTML 元素 中,并添加带有 box-shadow 的 div 元素

$("figure").on('mousemove', function(e){
    $('.shadow').css({
       left: e.pageX - $(this).offset().left - 40,
       top: e.pageY - $(this).offset().top -40
    });
});
figure{
    position: relative;
    margin: 20px auto;
    width: 480px;
    height: 480px;
    overflow: hidden
}
figure:hover .shadow{
    opacity: 1
}
img{
    width: 100%
}

.shadow{
    position: absolute;
    left: 80px;
    top: 60px;
    z-index: 1;
    background: transparent;
    width: 100px;
    height: 100px;
    opacity: 0;
    transition: opacity .3s ease;
    border-radius: 50%;
    box-shadow: 0 0 0 60em rgba(0,0,0,.5)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
    <img src=http://i.imgur.com/orn8Dgf.jpg />
    <div  class=shadow></div>
</figure>


1
投票

基于this,我有解决您问题的方法:

  • 使用标记叠加图像

    <div class="container">`
        <div class="bg-image"></div>
        <div class="highlight-region"></div>
    </div>
    
  • 标记上的灰度而不是图像的容器

     .container .bg-image { 
           opacity:0.3;
        -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
             -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
             -webkit-filter: grayscale(100%);
             filter: gray;
             filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        height:455px;
        width:606px;
    }
    
  • 在高亮区域设置不透明度 = 0

    .container div.highlight-region {
        height:150px; 
        width:150px;
        border-radius: 50%;
        opacity:0;
    }
    

演示可以看这里:http://jsfiddle.net/MT4T7/438/


0
投票

这很简单,不需要使用 JS 或库,只需参考这篇文章:https://www.developerthink.com/blogs/how-to-create-a-colorized-spotlight-effect-on-image

© www.soinside.com 2019 - 2024. All rights reserved.