Question

我的网站使用背景图片来适合整个屏幕。图像显示不正确。我无法获得CSS来纠正问题。下面是我的caa和div，分别显示背景图像和每次刷新时显示的不同图像。我添加了整个html页面，并添加了图片的CSS，希望对您有所帮助。

body, html {
height: 100vh;
margin: 0;
}

/***********************************************************************************************************************Background*/
.bg {background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cape Breton Cares</title>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript"> 
var bgcount = 370;
function changebg() {
var num =  Math.ceil( Math.random() * bgcount );
document.body.background = 'img/'+num+'.jpg';
}
</script>
<meta name="description" content="Cape Breton Cares - Helping provide meals and support for animal organizations in our local communities."/>      
<meta name="keywords" content="donation, charity, nonprofit, non-profit, donor, free, raise money, tab, extension, app, puppy, puppies, kitten, kittens, cat, dog, cats, dogs, spca, feed, anilals, homepage, startpage, Cares, raise money, anilam shelters, animal, shelter">
<link rel="shortcut icon" href="https://www.capebretoncares.com/Start/images/fav/favicon.ico">
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link href="https://www.capebretoncares.com/Start/css/index.css" rel="stylesheet">
<script  src="https://www.capebretoncares.com/Start/js/index.js"></script>
</head>
<body onclick="onBodyClick(event)" scroll="no" style="overflow: hidden">
<div class="bg"></div>
<!------------------------------------------------------------------------------------------------------------------------------------------------- Header -->
<div class="s-header">
<div class="s-header-inner">
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Logo -->
<div class="s-header-links-left">
<div class="s-logo">
<a href="https://www.capebretoncares.com/Start/" target="_top">
<img src="https://www.capebretoncares.com/Start/images/cape-breton-cares-logo-1.png"></a>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------------------------------- Header Links Right -->
<div class="s-header-links-right">
<!------------------------------------------------------------------------------------------------------------------------------------------- Amount Raised -->
<span class="tooltip" onclick="myFunction(event)">
<div class="amount">$234.41</div>
<span id="myPopup" style="display: none;">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.
</span>
</span>
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Bell -->
<span class="tooltips" onclick="myFunctions(event)">
<div class="bell">
<i class='far fa-bell'></i>
</div>
<span id="mypopup" style="display: none;">
<strong>Cape Breton Cares' Brand New Look!</strong>
<br/>
<br/>
We urge you to please share Cape Breton Cares with your friends and family to help provide more meals and support for animal organizations in our local communities.
<p><a href="https://www.capebretoncares.com/p/spread-the-word/" target="_blank">Spread The Word</a></p>
Stay tuned for exciting updates coming soon.
</span>
</span>
<!--------------------------------------------------------------------------------------------------------------------------------------------------- Heart -->
<span class="toolstip" onclick="myFunctionss(event)">
<div class="heart">
<i class="far fa-heart"></i>
</div>
<span id="mYpopup" style="display: none;">
Every New Tab you open helps provide meals and support for animal organizations in our local communities. On average we need around 100 New Tabs to provide $1 of support to help our local animal organizations!
</span>
</span>
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Menu -->
<span class="toolstips" onclick="myFunctionsss(event)">
<div class="menu">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</div>
<span id="mYpopuP" style="display: none;">
<a href="https://www.capebretoncares.com/p/contact/" target="_blank">Contact Us</a>
<a href="https://www.capebretoncares.com/p/donations/" target="_blank">Our Donations</a>
<a href="https://www.capebretoncares.com/p/privacy-policy/" target="_blank">Privacy Policy</a>
<a href="https://www.capebretoncares.com/p/terms-of-use/" target="_blank">Terms of Use</a>
</span>
</span>
</div>
</div>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------ Middle Content -->
<div class="middle">
<!---------------------------------------------------------------------------------------------------------------------------------------------- Search Box -->
<div class="BorderLineSearch">
<form class="search" method="get" action="http://www.google.com/search?q=">
<div class="options">
<div class="selectedOption" onclick="showSearchEngineOptions()">
<img class="selected" id="0"src="https://www.capebretoncares.com/Start/images/search-icons/google.png" alt="Google">
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
<div class="notSelectedOptions">
<div class="notSelected" onClick="changeImage(1)">
<div class="imgbox">
<img id="1" alt="Yahoo"src="https://www.capebretoncares.com/Start/images/search-icons/yahoo.png">
<span id="span1"> Yahoo</span>
</div>
</div>
<div class="notSelected" onClick="changeImage(2)">
<div class="imgbox">
<img id="2" alt="Bing"src="https://www.capebretoncares.com/Start/images/search-icons/bing.png">
<span id="span2"> Bing</span>
</div>
</div>
<div class="notSelected" onClick="changeImage(3)">
<div class="imgbox">
<img id="3" alt="DuckGo"src="https://www.capebretoncares.com/Start/images/search-icons/duck.png">
<span id="span3"> DuckGo</span>
</div>
</div>
</div>
</div>
<input type="text" name="q" class="searchTerm" placeholder=" Search the Web..." autocomplete="off" />
<button id="button">
<font size="4"><i class="fa fa-search" style="cursor: pointer;"></i></font>
</button>
</form>
</div>
<!--------------------------------------------------------------------------------------------------------------------------------------------- Quick Links -->
<div class="quick-links">
<table border="0" style="width:100%">
<col width="80">
<col width="80">
<col width="80">
<col width="80">
<col width="80">
<col width="80">
<tr>
<td align="center">
<a href="https://www.facebook.com/" target="_top">
<div class="quick-link">
<img src="https://www.capebretoncares.com/Start/images/icons/facebook.png">
</div>
Facebook</a>
</td>
<td align="center">
<a href="https://www.amazon.ca/?&_encoding=UTF8&tag=capebretonc0b-20&linkCode=ur2&linkId=4a9dde60dc4d0312f72da96011a99d91&camp=15121&creative=330641" target="_top">
<div class="quick-link">
<img src="https://www.capebretoncares.com/Start/images/icons/amazon.png">
</div>
Amazon</a>
</td>
<td align="center">
<a href="https://www.twitter.com/" target="_top">
<div class="quick-link">
<img src="https://www.capebretoncares.com/Start/images/icons/twitter.png">
</div>
Twitter</a>
</td>
<td align="center">
<a href="https://www.youtube.com/" target="_top">
<div class="quick-link">
<img src="https://www.capebretoncares.com/Start/images/icons/youtube.png">
</div>
Youtube</a>
</td>
<td align="center">
<a href="https://www.instagram.com/" target="_top">
<div class="quick-link">
<img src="https://www.capebretoncares.com/Start/images/icons/instagram.png">
</div>
Instagram</a>
</td>
<td align="center">
<a href="https://www.kijiji.ca/" target="_top">
<div class="quick-link">
<img src="https://www.capebretoncares.com/Start/images/icons/kijiji.png">
</div>
Kijiji</a>
</td>
</tr>
</table>
</br>
</br>
<table border="0" style="width:100%">
<col width="80">
<col width="80">
<col width="80">
<col width="80">
<col width="80">
<col width="80">
<tr>
<td align="center">
<a href="https://mail.google.com/" target="_top">
<div class="quick-link">
<img src="https://www.capebretoncares.com/Start/images/icons/gmail.png">
</div>
Gmail</a>
</td>
<td align="center">
<a href="https://www.capebretonpost.com/" target="_top">
<div class="quick-link">
<img src="https://www.capebretoncares.com/Start/images/icons/cbpost.png">
</div>
CB Post</a>
</td>
<td align="center">
<a href="https://www.netflix.com/" target="_top">
<div class="quick-link">
<img src="https://www.capebretoncares.com/Start/images/icons/netflix.png">
</div>
Netflix</a>
</td>
<td align="center">
<a href="https://www.walmart.ca/" target="_top">
<div class="quick-link">
<img src="https://www.capebretoncares.com/Start/images/icons/walmart.png">
</div>
Walmart</a>
</td>
<td align="center">
<a href="https://www.wish.com/" target="_top">
<div class="quick-link">
<img src="https://www.capebretoncares.com/Start/images/icons/wish.png">
</div>
Wish</a>
</td>
<td align="center">
<a href="https://en.wikipedia.org/wiki/Main_Page/">
<div class="quick-link">
<img src="https://www.capebretoncares.com/Start/images/icons/wikipedia.png">
</div>
Wikipedia</a>
</td>
</tr>
</table>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------------------------------------------- Footer -->
<div class="s-footer">
<?php
$ch = curl_init("https://www.capebretoncares.com/ads.php");
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
?>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------- Scripts -->
<script type="text/javascript"> 
changebg();
</script>
<script  src="https://www.capebretoncares.com/Start/js/toggle_menu.js"></script>
<script  src="https://www.capebretoncares.com/Start/js/popup.js"></script>
</body>  
</html>

Answer 1

要在元素上设置背景图像，请使用el.style.backgroundImage = 'url(...)'。

您当前的代码尝试在body元素上设置背景图片，而不是在类bg的元素上设置背景图片，这会使CSS选择器不正确。

要么..

将CSS选择器更改为body { ... }，
将类bg添加到body标记中，
或更改JavaScript以设置.bg元素的样式。

body样式示例：

var bgcount = 370;

function changebg() {
  var num = Math.ceil(Math.random() * bgcount);
  document.body.style.backgroundImage = 'url(https://www.capebretoncares.com/Start/img/' + num + '.jpg)';
}

changebg();

body,
html {
  height: 100%;
  margin: 0;
}

body {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

.bg元素样式示例：

var bgcount = 370;

function changebg() {
  var num = Math.ceil(Math.random() * bgcount);
  document.querySelector('.bg').style.backgroundImage = 'url(https://www.capebretoncares.com/Start/img/' + num + '.jpg)';
}

changebg();

body,
html {
  height: 100%;
  margin: 0;
}

.bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

<div class="bg"></div>

图像背景不适合屏幕

1 个答案: