背景圖片模糊與背景顏色同時顯示,滑鼠滑入背景圖片變清晰

SASS 寫法範例
CSS 寫法範例
帶入實例篇-banner與cards區塊滑鼠滑入效果

| 作法拆解 |

  • .block 設定 relative ,下方的子元素 .block__img.block__color.block__word 皆設定 absolute
  • .block__img.block__color 因沒明確設定高度,所以 上下左右皆設定0 ,或使用 width:100%height:100% 也可,並跟隨父元素 .block 做寬高縮放
  • .block 處設定 flex,讓 .block__word 文字垂直置中
  • .block__word 設定 z-indexz-index 數值越大權重越大,所以這邊設定 99 ,讓文字顯示最上方
  • 這邊有使用到 filter 屬性 → blur 模糊
<div class="box">
  <a href="#" class="block">
    <div class="block__img"></div>
    <div class="block__color"></div>
    <div class="block__word">
      <p>滑鼠請滑入試試,背景圖會變清晰唷!</p>     
    </div>
  </a>  
</div>
*,*:before,*:after{box-sizing: border-box;}
body{ 
  font-family: "Noto Sans", "Microsoft JhengHei";
  line-height: 1.6;
}
a{
  display:block;
  text-decoration:none;
}

.box{
  max-width:700px;
  margin: 0 auto;
  .block{
    position:relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    display:flex;
    justify-content:center;
    align-items:center;    
    &:hover .block__img{
      filter:blur(0);
    }
    &__img{
      background:url(https://upload.cc/i1/2019/09/25/JqCLzk.jpg) no-repeat;
      background-size: cover;
      background-position:center center;      
      position:absolute;
      top:0;
      bottom: 0;
      left: 0;
      right: 0;
      filter:blur(5px);
    }  
    &__color{
      position:absolute;
      background: #293462;
      width: 100%;
      height: 100%;
      opacity:0.5;
    }
    &__word{
      position:absolute;
      color:#fff;
      z-index:99;
      font-size: 1.6rem;
    }
  }

}

備註
// codepen SCSS轉 CSS 示意圖
codepen SCSS轉 CSS 示意圖
.
.

參考文章

  1. 六角學院SASS課程-共筆文件
    • 位置 : 程式碼位置-網頁
  2. MDN Web docs filter 屬性
最後修改日期: 6 2 月, 2020

作者