The introduction
To give a frosted glass effect to a box floating over an image, where the image below is blurred through the box, use CSS to create a simple effect.
Not compatible with IE pure CSS implementation code
The implementation code
Start by creating the HTML code for the background and blur boxes
<div class='bg'>
<div class='blur'></div>
</div>
Copy the codeHere is the CSS code, here is a random picture on the Internet, if the picture is invalid, replace it with another picture link
html.body {
height: 100%;
margin: 0;
}
.bg {
height: 100%;
overflow: auto;
}
.blur {
width: 500px;
height: 500px;
position: relative;
margin: 200px auto 400px;
border: 1px solid #ffffff99;
}
.blur::before {
content: ' ';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
filter: blur(4px);
}
.bg..blur::before {
background-image: url(http://file.youlai.cn/cnkfile1/M00/10/46/oYYBAFlU1WWAGvkPAAQlbBVHA7Y81.jpeg);
background-attachment: fixed;
background-size: cover;
}
Copy the codeActual effect picture (click the effect picture to view the demo) :
Realize the principle of
In terms of the implementation principle, it is not a mask effect, but two layers of image overlay, one layer is not blurred at the bottom, the other layer is blurred in the box (filter: blur(4px)).
In fact, if you consider compatible with all, you can not blur, directly use Photoshop to blur the picture, the box with blurred images, as long as the picture size is the same, the effect is the same.
Set two pictures of background-attachment: fixed; background-size: cover; Style so that the background image expands large enough to completely cover the background area and does not move while the rest of the page scrolls.
These two effects are combined to create the effect shown in the code above. Because is to use the filter to make fuzzy images, so in the use of filter: progid: DXImageTransform. Microsoft. The Blur (Pixel Radius = 5, MakeShadow = false). The styles are compatible with IE6-IE9, but IE10 and IE11 do not have any styles that can blur images, so if you want to use them in IE10 and IE11, you can use SVG filter. The following code
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="blue">
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<image filter="url(#blur)" x="0" y="0" width="200px" height="100px" xlink:href="http://file.youlai.cn/cnkfile1/M00/10/46/oYYBAFlU1WWAGvkPAAQlbBVHA7Y81.jpeg" alt="">
</svg>
Copy the codeResults the following
background-attachment: fixed; background-size: cover;
Compatible with IE10, IE11 blur mask effect, using Canvas
The implementation code
The HTML code
<div class='bg'>
<div class='blur-box'>
<div class="blur" id="blurID"></div>
</div>
</div>
Copy the codeCSS code
html.body {
margin: 0;
height: 100%;
}
.bg {
height: 100%;
overflow: auto;
}
.blur-box {
width: 500px;
height: 500px;
position: relative;
margin: 200px auto 500px;
border: 1px solid #ffffff;
}
.blur {
width: 100%;
height: 100%;
}
.bg..blur {
background-image: url(./oYYBAFlU1WWAGvkPAAQlbBVHA7Y81.jpeg);
background-attachment: fixed;
background-size: cover;
}
Copy the codeJs code
function gaussBlur(imgData) {
var pixes = imgData.data;
var width = imgData.width;
var height = imgData.height;
var gaussMatrix = [],
gaussSum = 0,
x, y,
r, g, b, a,
i, j, k, len;
var radius = 10;
var sigma = 5;
a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
b = - 1 / (2 * sigma * sigma);
// Generate a Gaussian matrix
for (i = 0, x = -radius; x <= radius; x++, i++) {
g = a * Math.exp(b * x * x);
gaussMatrix[i] = g;
gaussSum += g;
}
// normalize to ensure that the value of the gaussian matrix is between [0,1]
for (i = 0, len = gaussMatrix.length; i < len; i++) {
gaussMatrix[i] /= gaussSum;
}
// One-dimensional Gaussian in the x direction
for (y = 0; y < height; y++) {
for (x = 0; x < width; x++) {
r = g = b = a = 0;
gaussSum = 0;
for (j = -radius; j <= radius; j++) {
k = x + j;
if (k >= 0 && k < width) {// make sure k does not exceed x
//r,g,b,a
i = (y * width + k) * 4;
r += pixes[i] * gaussMatrix[j + radius];
g += pixes[i + 1] * gaussMatrix[j + radius];
b += pixes[i + 2] * gaussMatrix[j + radius];
// a += pixes[i + 3] * gaussMatrix[j];
gaussSum += gaussMatrix[j + radius];
}
}
i = (y * width + x) * 4;
// Divide by gaussSum to eliminate the problem of insufficient Gaussian computation for pixels at the edge
// console.log(gaussSum)
pixes[i] = r / gaussSum;
pixes[i + 1] = g / gaussSum;
pixes[i + 2] = b / gaussSum;
// pixes[i + 3] = a ;}}// One-dimensional Gaussian operation in y direction
for (x = 0; x < width; x++) {
for (y = 0; y < height; y++) {
r = g = b = a = 0;
gaussSum = 0;
for (j = -radius; j <= radius; j++) {
k = y + j;
if (k >= 0 && k < height) {// make sure k does not exceed y
i = (k * width + x) * 4;
r += pixes[i] * gaussMatrix[j + radius];
g += pixes[i + 1] * gaussMatrix[j + radius];
b += pixes[i + 2] * gaussMatrix[j + radius];
// a += pixes[i + 3] * gaussMatrix[j];
gaussSum += gaussMatrix[j + radius];
}
}
i = (y * width + x) * 4;
pixes[i] = r / gaussSum;
pixes[i + 1] = g / gaussSum;
pixes[i + 2] = b / gaussSum; }}return imgData;
}
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
// Change the path of the image directly
img.src = "./oYYBAFlU1WWAGvkPAAQlbBVHA7Y81.jpeg";
img.onload = function () {
// Set the canvas width and height
canvas.height = img.height;
canvas.width = img.width;
// Draw the image to the canvas
ctx.drawImage(img, 0.0, img.width, img.height);
// From the canvas image
var data = ctx.getImageData(0.0, img.width, img.height);
// Blur the image data with gaussian
var emptyData = gaussBlur(data);
// Render the blurred image data onto the canvas
ctx.putImageData(emptyData, 0.0);
// Canvas image to base64 format, div background set to this data
document.getElementById('blurID').style.backgroundImage = 'url('+ canvas.toDataURL( 'image/png'.1 ) +') '
};
Copy the codeThe following is a code demo file, because the getImageData method is affected by the same origin policy, the image introduced by the external chain can not get the image data, so in the local test, only one file and one image, not put on Github, directly share with the web disk.
Web disk share file password 55wj
Realize the principle of
The principle is the same as the above method, except that canvas is used in the step of blurring the image, img tag is used to obtain the image, and then the image is rendered to canvas canvas. The image data on canvas is obtained through getImageData method, and the gaussBlur method in the above code is used to blur the image data. Render the processed data onto the canvas, convert the canvas to base64 data, and assign values to the background of the box.
Because the fuzzy algorithm written here is a Canvas fuzzy picture randomly found on the Internet, the fuzzy radius cannot be configured, but can only be fixed. Students who want to know about Gaussian fuzzy algorithm can read this article of Gaussian fuzzy algorithm written by Teacher Ruan and write the algorithm they want. You can also use a more mature plug-in, StackBlur. Js,
If you want to view the demo file in Chrome and Firefox, you need to put the demo file into the front-end service. It is recommended to use Go Live in VSCode. You only need to install the Live Server plug-in. Click Go Live in the lower right corner to create a front-end service from the current software open folder. You can see 127.0.0.1:5500 in the address bar, which is a local service. Put a picture of it
This method is blurred by calculating the RGB value of each pixel in the picture and averaging the RGB value of adjacent pixels. Therefore, the calculation will be slow when the picture is larger, so please use it accordingly.
Welcome to correct any mistakes, thank you.