欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css实现背景图片的毛玻璃效果

程序员文章站 2022-05-28 14:27:03
...

问题一

1、简述问题 

       最近在做登录页面的时候，遇到了一个问题：将登录页面的背景图片，设置为毛玻璃效果。在网上找到了关于这方面的资料。


2、问题解决


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	    <style type="text/css">
	    	.blur {	
		    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
		    background-position: center;
		    background-size: cover;		    
		    height: 1300px;
		    -webkit-filter: blur(10px); /* Chrome, Opera */
		       -moz-filter: blur(10px);
		        -ms-filter: blur(10px);    
		            filter: blur(10px);
		    
		    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
		}
	    </style>
	</head>
	<body>
		<img src="img/bg3.jpg" class="blur"/>
	</body>
</html>

     实现


css实现背景图片的毛玻璃效果


现在已经可以显示背景的毛玻璃效果了，但是又出现了问题。


css实现背景图片的毛玻璃效果

问题二


1、问题简述

     当我们再写一个div的时候，以为背景图片也是占有空间的，这时候，就会把红色的div挤出来，name如何来解决。



2、问题解决


    

                <img src="img/bg3.jpg" class="blur"/>
		<div id=""  style="position:fixed;top:0;right:0;height: 400px;width: 400px;background-color: red;">
			
		</div>

将我们新设置的div，设置一个新的属性，position：fixed；将红色的div固定在顶部。

这时，我们在红色的div中写上内容就行了；




     

相关标签： html页面背景毛玻璃效果

上一篇： CSS实现元素颜色渐变效果

下一篇： Kotlin学习之开发环境配置

推荐阅读