用jquery向网页添加背景图片拉伸模糊遮罩层代码

AndrewXu 2021-09-07 原文

方法一：手动添加

1.在body内任意位置添加html代码

<div id="web_bg" style=" position:fixed; _position:absolute; top:0; width:100%; height:100%; z-index:-2">
            <img style="position:fixed;" src="http://img.bizhi.sogou.com/images/2014/07/02/701582.jpg" height="100%" width="100%" />
</div>
<div class="" id="web_bg_mask" style="height:100%; width:100%; position:fixed; _position:absolute; top:0; z-index:-1;"></div>

2.添加jquery.js文件(省略)

3.页面加载完成后渲染背景（写在html页面中）

<script>
            $().ready(function() {
                blurWebBackground(2);
                maskWebBackground(4);
            });
</script>

4.编写 blurWebBackground(); maskWebBackground();代码（写在外部js文件或本页面script标签内都可）

<script>
function blurWebBackground(blur)
{
    blur = blur + "px";
    $("#web_bg").css(\'-moz-filter\', \'blur(\' + blur + \')\');
    $("#web_bg").css(\'-webkit-filter\', \'blur(\' + blur + \')\');
    $("#web_bg").css(\'-o-filter\', \'blur(\' + blur + \')\');
    $("#web_bg").css(\'-ms-filter\', \'blur(\' + blur + \')\');
    $("#web_bg").css(\'filter\', \'blur(\' + blur + \')\');
}

function maskWebBackground(opacity)
{
    $("#web_bg_mask").css(\'opacity\', opacity / 10);
    $("#web_bg_mask").css(\'filter\', \' alpha(opacity=\' + opacity * 10 + \')\');
    $("#web_bg_mask").css(\'background-color\', \'#333\');
}

</script>

方法二：直接用jquery自动完成

1.编写ready函数，页面加载完成以后生成背景图片并处理

<script>
            $().ready(function() {
　　　　　　　　　addBackgroundImg();
                blurWebBackground(2);
　　　　　　　　　　addMask();
                maskWebBackground(4);
            });
</script>

2.各种方法实现

function blurWebBackground(blur)
{
    blur = blur + "px";
    $("#web_bg").css(\'-moz-filter\', \'blur(\' + blur + \')\');
    $("#web_bg").css(\'-webkit-filter\', \'blur(\' + blur + \')\');
    $("#web_bg").css(\'-o-filter\', \'blur(\' + blur + \')\');
    $("#web_bg").css(\'-ms-filter\', \'blur(\' + blur + \')\');
    $("#web_bg").css(\'filter\', \'blur(\' + blur + \')\');
}

function maskWebBackground(opacity)
{
    $("#web_bg_mask").css(\'opacity\', opacity / 10);
    $("#web_bg_mask").css(\'filter\', \' alpha(opacity=\' + opacity * 10 + \')\');
    $("#web_bg_mask").css(\'background-color\', \'#333\');
}

//可以指定加载的图片名称，前提是必须在src处填好预设的你的图片存储uri地址，只需替换ImgName（图片名称）即可
function addBackgroundImg(ImgName){
    var BacImg= "<div id=\'web_bg\' style=\' position:fixed; _position:absolute; top:0; width:100%; height:100%; z-index:-2\'>";
    BacImg += "<img style=\'position:fixed;\' src=\'img/"+ImgName+".jpg\' height=\'100%\' width=\'100%\' />";
    BacImg += "</div>";
    $(document.body).append(BacImg);
}

//固定图片
function addBackgroundImg(){
    var BacImg= "<div id=\'web_bg\' style=\' position:fixed; _position:absolute; top:0; width:100%; height:100%; z-index:-2\'>";
    BacImg += "<img style=\'position:fixed;\' src=\'http://img.bizhi.sogou.com/images/2014/07/02/701582.jpg\' height=\'100%\' width=\'100%\' />";
    BacImg += "</div>";
    $(document.body).append(BacImg);
}

//也可以指定图片Uri
function addBackgroundImg(ImgUri){
    var BacImg= "<div id=\'web_bg\' style=\'position:fixed; _position:absolute;  top:0; width:100%; height:100%; z-index:-2\'>";
    BacImg += "<img style=\'position:fixed;\' src=\'"+ImgUri+"\' height=\'100%\' width=\'100%\' />";
    BacImg += "</div>";
    $(document.body).append(BacImg);
}

function addMask()
{
    var BacMask = "<div id=\'web_bg_mask\' style=\'height:100%; width:100%; position:fixed; _position:absolute; top:0; z-index:-1;\'></div>";
    $(document.body).append(BacMask);
}