我想在我的页面上放大和缩小背景图像.我尝试过多件事情,但似乎没有什么可以像我想要的那样工作. :(我的网页的网址是
http://quaaoutlodge.com/drupal-7.14/,对于每个链接,都有不同的背景图像,我知道图像的大小和质量将需要优化,但我首先想弄清楚它的技术部分,如果有人请coudl协助这样做吗？
非常感谢你！
罗恩
解决方法
每个页面上都有相同的背景图片
如果你想要一个调整大小并填充整个窗口空间的背景图像,无论大小如何,那么使用这个CSS,
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
每个页面上的不同背景图像
HTML
<div id="bg">
<img src="<?=$imgsrc;?>" alt="">
</div>
CSS
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
资料来源：CSS-Tricks
