第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

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

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

慕村225694 2023-05-11 14:12:36
我的要求是模糊圖像,同時(shí)在選定區(qū)域保持不模糊。我通過絕對定位在圖像上放置了一個(gè) div。圖像僅在該區(qū)域可見,除此區(qū)域外,所有其他圖像都是模糊的。這是我的 DOM 結(jié)構(gòu)<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貢獻(xiàn)1798條經(jīng)驗(yàn) 獲得超7個(gè)贊

這是一個(gè)如何執(zhí)行此操作的小演示:


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>


查看完整回答
反對 回復(fù) 2023-05-11
  • 1 回答
  • 0 關(guān)注
  • 166 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號