设置背景图片时,图片不够大产生自动重复,怎么设置图片大小自动随显示窗口的大小而改变
我也被这个问题困扰了很久,后来用background-size:cover;实现了
html5中可以在css样式中使用background-size属性
我也被这个问题困扰了很久,后来用background-size:cover;实现了
设置背景图像的元素需要有大小,才能显示背景图像。改变背景图像大小,可以改变元素大小这个角度入手。代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
div{
margin: 0 auto;
padding: 0 0;
height:200px;
width: 200px;
background-size: 100% 100%;
background-image: url(q.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="ele">
</div>
<script type="text/javascript">
window.onresize=function()
{
var ele = document.getElementById('ele')
ele.style.width=window.innerWidth / 5+"px";
ele.style.height = window.innerHeight / 5+"px";
}
</script>
</body>
</html>