手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >页面背景图片的拉伸实现代码
页面背景图片的拉伸实现代码
摘要:1.用js插入一张图片并控制图片宽高$(function(){$(".bd").append("");$("#mainbg").append...

<span><strong><span>1.用js插入一张图片并控制图片宽高</span></strong></span>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">

$(function(){

$(".bd").append("<div id='mainbg'/>");

$("#mainbg").append("<img id='im' src='a82a2e72e7af59296db0d63e3d2ecc5e!n1200.jpg' />");

recover();

$(window).resize(function(e) {

recover();

});

});

function recover(){

var winw = $(window).width();

var winh = $(window).height();

$("#im").attr({width:winw, height:winh});

}

</script>

利用CSS按比例缩放背景图片

<style type="text/css">

.bd{

background-image:url(a82a2e72e7af59296db0d63e3d2ecc5e!n1200.jpg);

background-repeat:no-repeat;

background-size:cover;

}

</style>

<body>

</body>

【页面背景图片的拉伸实现代码】相关文章:

源自CODEPEN的25个最受欢迎的HTML/CSS代码

提高淘宝C店转化率的实用代码

div内table居中实现代码

css 如何让背景图片拉伸填充避免重复显示

页面背景图片的拉伸实现代码

Web页面优化减小页面对内存及CPU的占用

CSS3 实用技巧:实现黑白图像效果示例代码

连续循环向上滚动代码

CSS代码当前页效果的实现

DIV背景图片在Firefox下不显示通过overflow:auto可解决

精品推荐
分类导航