zoukankan      html  css  js  c++  java
  • 背景虚化

     -webkit-filter: blur(5px);
        -ms-filter: blur(5px);
        filter: blur(5px);
        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5,MakeShadow=false);
        z-index: 50;
        background-position: center 0 !important;
        background-repeat: no-repeat;

    bilibili背景处理方法。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.box{
    				 100px;
    				height: 100px;
    				background: #fff;
    				position: relative;
    				margin: 0 auto;
    			}
    			.box2{
    				position: absolute;
    				left: 0;
    				top: 0;
    				 100%;
    				height: 100%;
    				background:#000;
    				opacity: 0.3;
    			}
    			.row {
    				-webkit-filter: blur(3px);
    				-moz-filter: blur(3px);
    				-o-filter: blur(3px);
    				-ms-filter: blur(3px);
    				filter: blur(3px);
    			}
    			.box3{
    				50px;
    				height: 50px;
    				background: #fff;
    				margin: 0 auto;
    				position: absolute;
    				left:25px;
    				top: 25px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box ">
    				<div class="box2"></div>
    				<div class="row">
    					1231321
    					2132
    				</div>
    				<div class="box3">
    					<p>123</p>
    				</div>
    		</div>
    	</body>
    </html>
    
  • 相关阅读:
    机器学习的定义和分类
    选股
    mysql修改密码
    快速排序
    php的错误类型
    MySQL数据库优化
    库存超卖问题
    循环处理
    kafka安装配置
    JavaScript、jQuery杂记
  • 原文地址:https://www.cnblogs.com/carr-css/p/6513091.html
Copyright © 2011-2022 走看看