亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

模糊 css 中除選定區域之外的所有圖像

模糊 css 中除選定區域之外的所有圖像

慕村225694 2023-05-11 14:12:36
我的要求是模糊圖像,同時在選定區域保持不模糊。我通過絕對定位在圖像上放置了一個 div。圖像僅在該區域可見,除此區域外,所有其他圖像都是模糊的。這是我的 DOM 結構<div className="col-md-12 align-center mgb-30">//within this area image is unblur while rest of image is blurred<div className="venue-image-filter flex all-center color-white"><h3 className="heading">Visible Area</h3></div><img src="https://i.picsum.photos/id/237/200/300.jpg" className="border-radius-10" alt="Venue" /></div>過濾器 div 的樣式.venue-image-filter{position:absolute;top:50%;left:50%;width:300px;height:200px;transform:translate(-50%,-50%);}
查看完整描述

1 回答

?
元芳怎么了

TA貢獻1798條經驗 獲得超7個贊

這是一個如何執行此操作的小演示:


document.querySelector('.image').addEventListener('mousemove', ({ offsetX, offsetY, target }) => {

  const x = offsetX / target.clientWidth;

  const y = offsetY / target.clientHeight;

  target.style.setProperty('--x', `${x * 100}%`);

  target.style.setProperty('--y', `${y * 100}%`);

});

.image {

  width: 640px;

  height: 200px;

  position: relative;

}


.image::before, .image::after {

  content: '';

  display: block;

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background-image: var(--image);

}


.image::before {

  filter: blur(10px);

}


.image::after {

  clip-path: circle(20% at var(--x, 50%) var(--y, 50%));

  z-index: 1;

}

<div class="image" style="--image: url(https://picsum.photos/id/862/640/200)"><div>


查看完整回答
反對 回復 2023-05-11
  • 1 回答
  • 0 關注
  • 168 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號