html – 规模的背景图片

发布时间：2020-12-14 18:52:46 所属栏目：资源来源：网络整理

导读：我想在我的页面上放大和缩小背景图像.我尝试过多件事情,但似乎没有什么可以像我想要的那样工作. :(我的网页的网址是 http://quaaoutlodge.com/drupal-7.14/,对于每个链接,都有不同的背景图像,我知道图像的大小和质量将需要优化,但我首先想弄清楚它的技术部分

我想在我的页面上放大和缩小背景图像.我尝试过多件事情,但似乎没有什么可以像我想要的那样工作. :(我的网页的网址是 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!