包含的HTML和CSS具有它,以便当我在firefox全屏幕上查看时页面如下所示：
这正是我想要的,但我无法弄清楚按钮位置和背景图像大小的组合使得当页面调整大小时,按钮缩小并随着’太阳’移动以便’太阳’ ‘仍然有保障.这样做的方法是什么？
@import url(http://Fonts.GoogleAPIs.com/CSS?family=Ubuntu+Condensed);@import url(http://Fonts.GoogleAPIs.com/CSS?family=Open+Sans);body{ position: fixed; background-image: url("dHbl8SP.jpg"); background-repeat: no-repeat; background-size: cover; min-height: 5000px; background-position: top center; background-attachment: fixed;}.purple{ color: rgb(0,100,200); border-radius: 50%; background-color: rgb(55,55); Font-family: "Ubuntu Condensed",sans-serif; Font-size: 17pt; position:inherit; top: 202px; left: 679px; height: 183px; wIDth: 183px; border-style: solID;; border-color: rgb(15,15);}.purple:hover{ top: 198px; left: 675px; height: 191px; wIDth: 191px;}.purple:active{ background-color: rgb(45,45); color: rgb(0,150,150);}footer { position: fixed; bottom: 0px; wIDth: 100%; left: 0px; heigth: 8px; align-self: stretch; background-color: rgba(8,8,.75); color: rgb(250,250,200); Font-family: "Open Sans",sans-serif; Font-size: 10pt; text-align: center;} <!DOCTYPE HTML><HTML><head> <Title>KavCloud</Title> <Meta charset="UTF-8"/> <link href="kavCloud.CSS" rel="stylesheet" type = "text/CSS" /> <script src="kavCloudScriptingOne.Js"></script></head><body> <header> </header> <button type = "button" onClick = "f1()" >button</button> <footer>Page by Sean Robert Letendre</footer></body></HTML>解决方法 我会用你可以控制的图像取代太阳.没有办法考虑太阳将拥有的所有各种可能的位置,因为你有背景设置覆盖.因此,观察它的设备的高度和宽度可能会有所不同.将太阳创建为图像,将按钮置于顶部并为其提供相同的定位和尺寸. 总结
以上是内存溢出为你收集整理的html – 将内容与背景图像对齐全部内容，希望文章能够帮你解决html – 将内容与背景图像对齐所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）