Question

我有这张图片，我想制作一个网页：

包含的HTML和CSS可以让我在Firefox全屏幕上查看时页面如下所示：

这正是我想要的，但是我无法弄清楚按钮位置和背景图像大小的组合，这样当页面调整大小时，按钮缩小并随着'sun'移动，以便'太阳'仍然被覆盖。这样做的方法是什么？

@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,0,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,0,15);
}
.purple:hover{
  top: 198px;
  left: 675px;
  height: 191px;
  width: 191px;
}
.purple:active{
  background-color: rgb(45,0,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,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()" class="purple">Button</button>
  <footer>Page by Sean Robert Letendre</footer>
</body>
</html>

Answer 1

我会用您可以控制的图像替换太阳。没有办法考虑太阳将拥有的所有各种可能的位置，因为你有背景设置覆盖。因此，观察它的设备的高度和宽度可能会有所不同。将太阳创建为图像，将按钮置于顶部并为其提供相同的定位和尺寸。

将内容与背景图像对齐

1 个答案: