How to Realize the Blur Effect of Background Image on Frosted Glass in HTML5

How to Realize the Blur Effect of Background Image on Frosted Glass in HTML5: BY Daniel13 Nov,2020; Tags:
HTML5 Pictures Frosted Glass Effects

Introduction

The frosted glass effect is actually the blurring of the picture. We often have the background image blurring effect when we pull up the application in the mobile app. This is the frosted glass effect. This time we are going to share a background image frosted glass blur effect based on HTML5 and CSS3. We load a clear image on the page, and then generate a frosted glass blur effect within the specified image range, and make this frosted glass effect by adding border shadows More 3D stereo effect.

How to Realize the Blur Effect of Background Image on Frosted Glass in HTML5

Instructions

HTML Body Code

<div class="frosted-panel" panel-dimensions="80% 60%" breakpoint-type="min-width" breakpoints="600px 80% 80%, 1200px 60% 500px">

	<svg>
		<filter id="blurMe" filterRes="1200" color-interpolation-filters="sRGB">
			<feGaussianBlur in="SourceGraphic" stdDeviation="7" />
		</filter>

		<image xlink:href="./img/bg1.jpg" x="0" y="0" width="2880" height="1620" filter="url(#blurMe)" />
	</svg>

	<div class="content" content-margin="5px">
		<div class="flex-container">
			<span class="wh">80% 60%</span>
			<span class="wh">80% 80%</span>
			<span class="wh">Here is the text content</span>
		</div>		
	</div>	
</div>

Css Code

html {
	height: 100%;
	/* Need Flex to force Panel overflow */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	-ms-flex: 1 0 auto;
	flex: 1 0 auto;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

body {
	padding: 0;
	margin: 0;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: local;
	background-size: cover;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-flex: 1;
	    -ms-flex: 1 0 auto;
	        flex: 1 0 auto;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
			color:#fff;
}

Js Code

config : {
    'breakpoints' : []
  },

  error : function(s) {
    console.log(s)
  },

  valid_num : function(str) {
    return (!isNaN(str) && str != "" && str != null);
  },

  validate_wh : function(val) {
    var val = val.toLowerCase();
    var num;

    if (val === 'auto') {
      return true;
    } else if (!val.endsWith('px') && !val.endsWith('%')) {
      return false;
    } else if (val.endsWith('px')) {
      num = this.valid_num(val.replace('px', ''));
    } else if (val.endsWith('%')) {
      num = this.valid_num(val.replace('%', ''));
    }

    return (!num) ? false : true;
  },

  ignoring_breakpoint_err : function(breakpoint) {
    this.error('Ignoring breakpoint: "' + breakpoint + '"');
  },

  invalid_breakpoint_err : function(breakpoint, val, i) {
    var joined = breakpoint.join(' ');

    this.error('Invalid value "' + val + '" at breakpoint: "' + 
      joined + '", index: ' + i);

    this.ignoring_breakpoint_err(joined);
  },

VIEW NOW