如何更改部分中的背景？(不是 <div>， <section>)

，

(。

在我的网站代码的索引.html中，我有点击按钮时可以看到的各个部分。这是网站：https://olddigibox.github.io/sky-web-epg/(您唯一可以单击的按钮是更多...

我希望背景图像在您进入更多...部分页面。我该怎么做？以下是站点存储库：https://github.com/OldDigibox/sky-web-epg

我尝试使用CSS和JS更改背景，但没有奏效。以下是背景.js：

$(document).ready(function () {
while (true) {
if ($("guide").css("display") == "flex") {
$("body").get(0).style.setProperty("background-image", "url('https://media.discordapp.net/attachments/649968233553723405/709086018942402631/image1.jpg')");
}
else {
$("body").get(0).style.setProperty("background-image", "url('img/tv_guide.png')");
}
}
});

* {
margin: 0;
font-family: 'Zurich';
}
:root {
font-size: 16px;
--font-colour: white;
--main-colour: rgb(0, 37, 201);
--sub-colour: rgb(0, 26, 143);
--listnum-colour: rgb(126, 126, 255);
--main-colour-hover: #FCDA25;
--sub-colour-hover: rgb(197, 197, 0);
--listnum-colour-hover: rgb(0, 0, 179);
--font-colour-hover: rgb(0, 0, 179);
--background-image-blank: url('https://media.discordapp.net/attachments/649968233553723405/709086018942402631/image1.jpg');
--background-image: url("img/tv_guide.png");
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #111;
}
a:link {
text-decoration: none;
}
main {
background: var(--background-image);
background-position: top;
background-size: 100%;
width: 800px;
height: 600px;
display: flex;
align-items: end;
justify-content: center;
}
section.guide {
background: url("https://media.discordapp.net/attachments/649968233553723405/709086018942402631/image1.jpg");
background-position: top;
background-size: 100%;
width: 800px;
height: 600px;
display: flex;
align-items: end;
justify-content: center;
}
/*#guide {
background: var(--background-image-blank);
background-position: top;
background-size: 100%;
width: 800px;
height: 600px;
display: flex;
align-items: end;
justify-content: center;
}*/
.menulisting[id] {
display: none;
}
.menulisting#main {
display: flex;
}
.menulisting {
width: 65%;
height: 410px;
margin-top: auto;
margin-bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
user-select: none;
position: relative;
}
.menulisting li {
width: 100%;
height: 31.5px;
margin: 1px 0px;
background: var(--main-colour);
list-style-type: none;
color: var(--font-colour);
display: flex;
align-items: center;
font-size: 1.6rem;
}
.menulisting li:nth-of-type(1) {
margin-top: 0px;
}
.menulisting a {
color: var(--font-colour);
}
li .num {
background: var(--sub-colour);
width: 60px;
height: 100%;
margin: 0px 10px 0px 5px;
color: var(--listnum-colour);
text-align: center;
}
.menulisting li:hover {
background: var(--main-colour-hover);
color: var(--font-colour-hover);
}
.menulisting li:hover .num {
background: var(--sub-colour-hover);
color: var(--listnum-colour-hover);
}
.menulisting li:hover a {
color: var(--font-colour-hover);
}
.menulisting li:focus {
background: var(--main-colour-hover);
color: var(--font-colour-hover);
}
.menulisting li:focus .num {
background: var(--sub-colour-hover);
color: var(--listnum-colour-hover);
}
.menulisting li:focus a {
color: var(--font-colour-hover);
}
.links {
position: absolute;
bottom: -6%;
width: 100%;
font-size: 1rem;
text-align: right;
color: var(--main-colour);
display: inline;
overflow: hidden;
overflow-x: hidden;
white-space: nowrap;
}
.guidelisting {
width: 150%;
height: 410px;
margin-top: auto;
margin-bottom: auto;
display: flex;
flex-direction: row;
align-items: center;
user-select: none;
position: relative;
}
.guidelisting li {
font-family: 'ZurichTV';
}
.titles {
position: absolute;
top: -20%;
left: 5%;
width: 100%;
font-size: 2rem;
text-align: left;
color: var(--main-colour);
}
/* Font Families */
@font-face {
font-family: 'Zurich';
src: url('Zurich Bold Extended.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ZurichTV';
src: url('Zurich Bold Condensed.woff') format('woff');
font-weight: normal;
font-style: normal;
}

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sky Guide</title>
</head>
<body>
<main>
<iframe allow="autoplay" style="display:none" id="player" type="audio/mpeg">
</iframe>
<!--Landing Page-->
<section class="menulisting" id="main">
<li onclick="toPage('main', 'guide')">
<div class="num">1</div>
ALL CHANNELS
</li>
<li>
<div class="num">2</div>
ENTERTAINMENT
</li>
<li>
<div class="num">3</div>
LIFESTYLE & CULTURE
</li>
<li>
<div class="num">4</div>
MOVIES
</li>
<li>
<div class="num">5</div>
SPORTS
</li>
<li>
<div class="num">6</div>
NEWS
</li>
<li>
<div class="num">7</div>
DOCUMENTARIES
</li>
<li>
<div class="num">8</div>
KIDS
</li>
<li>
<div class="num">9</div>
MUSIC
</li>
<li onclick="toPage('main', 'more')">
<div class="num">0</div>
MORE...
</li>
<div class="links">
<a>Anytime</a>
<a>Planner</a>
<a>A-Z</a>
<a>Favourites</a>
</div>
</section>
<!--More Page-->
<section class="menulisting" id="more">
<li>
<div class="num">1</div>
RADIO
</li>
<li>
<div class="num">2</div>
SHOPPING
</li>
<li>
<div class="num">3</div>
RELIGION
</li>
<li>
<div class="num">4</div>
INTERNATIONAL
</li>
<li>
<div class="num">5</div>
GAMING & DATING
</li>
<li>
<div class="num">6</div>
SPECIALIST
</li>
<li>
<div class="num">7</div>
ADULT
</li>
<li onclick="toPage('more', 'custom')">
<div class="num">8</div>
CUSTOM PAGES
</li>
<li onclick="toPage('more', 'main')">
<div class="num">0</div>
BACK UP
</li>
<div class="links">
<a>Anytime</a>
<a>Planner</a>
<a>A-Z</a>
<a>Favourites</a>
</div>
</section>
<!--More Page-->
<section class="menulisting" id="custom">
<li onclick="lightsOff()">
<div class="num">1</div>
LIGHT SWITCH
</li>
<li onclick="toPage('custom', 'more')">
<div class="num">0</div>
BACK UP
</li>
<div class="links">
<a>Anytime</a>
<a>Planner</a>
<a>A-Z</a>
<a>Favourites</a>
</div>
</section>
<!--Channel Guide-->
<section class="menulisting" id="guide">
<div class="titles">ALL CHANNELS</div>
<div class="guidelisting">
<li>
101   BBC One
</li>
<li>
A SHOW
</li>
</div>
<div class="guidelisting">
<li>
102   BBC Two
</li>
<li>
A SHOW
</li>
</div>
<div class="guidelisting">
<li>
103   ITV
</li>
<li>
A SHOW
</li>
</div>
<div class="guidelisting">
<li>
104   Channel 4
</li>
<li>
A SHOW
</li>
</div>
<div class="guidelisting">
<li>
105   Channel 5
</li>
<li>
A SHOW
</li>
</div>
<div class="guidelisting">
<li>
106   Sky One
</li>
<li>
A SHOW
</li>
</div>
<div class="guidelisting">
<li>
107   Sky Witness
</li>
<li>
A SHOW
</li>
</div>
<div class="guidelisting">
<li>
108   Sky Atlantic
</li>
<li>
A SHOW
</li>
</div>
<div class="guidelisting">
<li>
109   W
</li>
<li>
A SHOW
</li>
</div>
<div class="guidelisting">
<li>
110   GOLD
</li>
<li>
A SHOW
</li>
</div>
<div class="links">
<a style="background-color:yellow; color:black" onclick="toPage('guide', 'main')">BACK UP</a>
<a>Anytime</a>
<a>Planner</a>
<a>A-Z</a>
<a>Favourites</a>
</div>
</section>
</main>
<!--<audio id="player" allow="autoplay" autoplay>
</audio>-->
</body>
<script src="script.js"></script>
<script src="epgsongs.js"></script>
<!--<script src="backgrounds.js"></script>-->
</html>

我不确定为什么你的函数中有这个循环。您可以在单击事件中使用jquery的toggleClass((，或者在您的情况下，如果您使用所需的背景图像创建2个类，则可以在toPage((中使用。这不是你的确切代码，但足够接近得到这个想法。

.backgroundImg1 {
background-image: url('https://media.discordapp.net/attachments/649968233553723405/709086018942402631/image1.jpg');
}
.backgroundImg2 {
background-image: url('https://media.istockphoto.com/photos/blue-abstract-background-or-texture-picture-id1138395421');
}

$('main').toggleClass('backgroundImg2')

https://jsfiddle.net/yvd6trnp/1/

编辑：如果要更改其他"页面"的背景，则必须为所需的背景添加其他类，并具有switch语句。

https://jsfiddle.net/krob636/tpvno64z/20/

不过，这会变得混乱，因此最好将您的部分包装在一个元素中，将背景图像应用于该元素，然后显示/隐藏它。

https://jsfiddle.net/krob636/Lqanfxmc/22/

相关内容

最新更新

热门标签：