gpt4 book ai didi

html - 使用CSS更改 body 背景图像

转载 作者:行者123 更新时间:2023-11-28 05:02:39 28 4
gpt4 key购买 nike

所以我想改变我的背景图片,问题是,因为它在我身上,它也在我的其他网页上发生变化,我不想要它,但我想保持相同的背景图片。我应该在第一页(我想悬停功能的地方)为我的 body 提供一个 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;
}

最佳答案

如果您只想将鼠标悬停在起始页上,您应该给它一个具有特定背景的类。

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 有错误,你不应该在 body

之外声明一个 div

无效的 html

<head>
<link rel="stylesheet" href="MakeHappy.css" />
</head>
<div id="wink" class="imageSwap">
</div>
<body>
</body>

但总的来说,您的 html 和 css 没有良好的实践和不一致的代码。我从不使用 id 来设置元素的样式,只使用类。还要让你的类和 ID 保持小写,比如 some-class 而不是 SomeClass。另外我认为你可以避免绝对定位你的导航元素。

关于html - 使用CSS更改 body 背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40007013/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com