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

时间:2022-05-03 17:46:32

方法一:手动添加

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);
}