html – 规模的背景图片

html – 规模的背景图片,第1张

概述我想在我的页面上放大和缩小背景图像.我尝试过多件事情,但似乎没有什么可以像我想要的那样工作. :(我的网页的网址是 http://quaaoutlodge.com/drupal-7.14/,对于每个链接,都有不同的背景图像,我知道图像的大小和质量将需要优化,但我首先想弄清楚它的技术部分,如果有人请coudl协助这样做吗? 非常感谢你! 罗恩 每个页面上都有相同的背景图片 如果你想要一个调整大小并填 我想在我的页面上放大和缩小背景图像.我尝试过多件事情,但似乎没有什么可以像我想要的那样工作. :(我的网页的网址是 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

总结

以上是内存溢出为你收集整理的html – 规模的背景图片全部内容,希望文章能够帮你解决html – 规模的背景图片所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1141726.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-31
下一篇 2022-05-31

发表评论

登录后才能评论

评论列表(0条)

保存