Question

所以我试图改变我的背景图像，问题是，因为它在我的身体上，它也在我的其他网页上改变，我不想要它，但我想保持相同的背景图像。我应该在我的第一页（我想要悬停功能的地方）给我的身体一个id / class吗？

<!DOCTYPE Html>
<head>
  <meta charset="utf-8" />
  <title>MakeHappy, One good thought everyday!</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script type="text/javascript" src="randomMessages.js"></script>
  <link rel="stylesheet" href="MakeHappy.css" />
</head>
<div id="wink" class="imageSwap">
</div>
<body>
  <header>
    <nav>
      <ul>
        <a id="MakeHappy" href="Main.html">Make Happy</a>
        <a id="Contact" href="#">Contact us</a>
        <a id="Suscribe" href="#">Suscribe</a>
        <a id="Project" href="#">Project</a>
      </ul>
    </nav>
  </header>

</body>

\

<!DOCTYPE Html>
<head>
  <meta charset="utf-8" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script type="text/javascript" src="randomMessages.js"></script>
  <title>MakeHappy, One good thought everyday!</title>
  <link rel="stylesheet" href="MakeHappy.css" />
</head>
<body class="Main">
  <input type="button" onclick="popup()" value="Click to be Happy!">
  <div  id="demo"></div>
</body>

\

body {
  background-image: url("MakeHappy.jpg");
  background-repeat: no-repeat;
  background-position: 200px 60px;
  background-size: 900px;
  background-color: black;
}
body:hover{
  background-image: url("MakeHappy2.jpg");
  background-position: 200px 60px;
}
.Main{
  background-size: 100px;
  background-position:top;
}
.imageSwap{
  position:absolute;
  color: yellow;
  padding: 150px;
  bottom: 130px;
  right: 500px
}
#MakeHappy{
  color: white;
  position: absolute;
  right: 660px;
}
#Contact{
  color: white;
  position: absolute;
  right: 660px;
  bottom: 10px;
  transform: rotate(180deg);
}
#Suscribe{
  color: white;
  position: absolute;
  left: 320px;
  bottom: 300px;
  transform: rotate(270deg);
}
#Project{
  color: white;
  position: absolute;
  right: 360px;
  bottom: 300px;
  transform: rotate(90deg);
}
.Main div{
  color: white;
  position: fixed;
}
input{
  position: fixed;
  bottom: 150px;
  left: 625px;
}

Answer 1

你应该给它一个具有该特定背景的课程，如果你只想悬停在上面，请说明你的起始页。

Node

但是您的第一个HTML有错误，您不应该在finalIndex = 50000; for (var index = 0; index < finalIndex; index++) { console.log("finished scraping page number: ", index); scrape(); }

之外声明一个div

无效的HTML

body {
  background-image: url("MakeHappy.jpg");
  background-repeat: no-repeat;
  background-position: 200px 60px;
  background-size: 900px;
  background-color: black;
}

.startpage-background:hover{
  background-image: url("MakeHappy2.jpg");
}

但总的来说你的html和css没有良好的做法和不一致的代码。我从不使用id来设置元素的样式，只使用类。同时将您的类和ID保持为小写，如body而不是<head> <link rel="stylesheet" href="MakeHappy.css" /> </head> <div id="wink" class="imageSwap"> </div> <body> </body>。另外我认为你可以避免绝对定位你的导航元素。

用css改变身体背景图像

1 个答案: