龙岗营销网站建设-CSS实现图片高斯模糊但边界清

--------

龙岗营销网站建设

-------p>

有些情况下,大家将会需要照片模糊不清可是界限清晰的实际效果,这时候候能够考虑到一种思路:在照片外面加一个框避免显示信息內容外溢,在框内将照片垂直居中,模糊不清并适度变大,让模糊不清的白边恰好在显示信息范畴外面,下面是完成方式:

 !DOCTYPE html 
 html lang="zh" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1.0" 
 meta http-equiv="X-UA-Compatible" content="ie=edge" 
 title CSS高斯模糊不清 /title 
 style 
 /* 原始化 */
 html,body {
 margin: 0;
 padding: 0;
 height: 100%;
 /* 照片外框 */
 .box {
 position: relative;
 width: 800px;
 height: 600px;
 display: flex;
 justify-content: center;
 align-items: center; /* 应用flex将照片水平竖直垂直居中 */
 overflow: hidden; /* 外溢一部分掩藏 */
 /* 照片层 */
 .image {
 position: absolute;
 width: 115%;
 height: 115%;
 background-image: url(example.jpg);
 background-size: 100%;
 background-position: center;
 background-repeat: no-repeat;
 filter: blur(20px); /* 模糊不清实际效果,与宽高搭配做适度调剂,把白边推出界限掩藏掉 */
 /style 
 /head 
 body 
 div !-- 照片外框 -- 
 div /div !-- 照片层 -- 
 /div 
 /body 
 /html 
Tags:CSS 模糊不清 ---------

龙岗营销网站建设

------------