单击照片会执行叠加/弹出照片。我想更改弹出照片的背景图像以匹配链接它的 的背景图像。这个问题已经被问过很多次了，但我无法拼凑出有效的代码。此外，我想避免使用任何包，如果可能的话，只使用 css 是理想的，比如
onclick="document.getElementById("photoEnlarged")style.backgroundImage = 'cardinal2'"
调用函数的div:
<div class="photoFrame">
<a onclick="myFunction('cardinal2')" href="#photoEnlarged">
<img class="imgBird" src="Cardinal1.jpg">
</a>
</div>
函数:
<script>
function myFunction(newURL) {
var x = document.getElementById("photoEnlarged");
x.style.backgroundImage = newURL;
};
</script>
正在更改的元素的 CSS:
#photoEnlarged {
height: 635px;
width: 850px;
margin: 0 auto;
position: relative;
z-index: 10;
display: none;
background: url(Cardinal1.jpg);
background-size: cover;
border-color: #FFFFFF;
border-style: double;
border-width: 5px;
}
此网页的目录:
全部发布:
<!DOCTYPE HTML>
<style>
html {
margin: 0px;
height: 100%;
width: 100%;
}
body {
background-color: #000000;
margin: 0px;
min-height: 100%;
width: 100%;
text-align: center;
}
.topnav {
background-color: #000000;
border-color: #FFFFFF;
border-bottom-style: solid;
border-width: 1.5px;
height: 5.5em;
margin-top: 10px;
margin-bottom: 75px;
padding-left: 5px;
padding-right: 5px;
position: relative;
}
.topnav a {
border-style: none;
color: #FFFFFF;
float: left;
font-size: 55px;
padding: 10px;
text-decoration: none;
}
.topnav a:hover {
background-color: #FFFFFF;
color: black;
}
.topnav a.active {
background-color: #FFFFFF;
color: white;
}
.topnav b {
border-style: none;
color: #FFFFFF;
float: right;
font-size: 25px;
padding: 27.5px;
text-decoration: none;
}
.topnav b:hover {
background-color: #FFFFFF;
color: black;
}
.topnav b.active {
background-color: #FFFFFF;
color: white;
}
.imgIcon {
border-style: none;
float: left;
height: 70px;
padding: 10px;
width: 65px;
}
h2 {
color: #FFFFFF;
font-size: 75px;
margin-bottom: 50px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
vertical-align: middle;
width: 97.75%;
}
.photosContainer {
background: #000000;
float: left;
height: auto;
margin-bottom: 50px;
padding-left: 5px;
padding-right: 5px;
position: relative;
text-align: center;
width: 100%;
}
.photoFrame {
display: inline-block;
height: auto;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
width: auto;
}
.imgBird {
border-color: #FFFFFF;
border-style: double;
border-width: 5px;
display: block;
height: 210px;
width: 350px;
position: relative;
}
.textContainer {
background: #000000;
height: 50px;
margin-left: 1.25%;
margin-right: 1.25%;
position: relative;
padding-left: 5px;
padding-right: 5px;
width: auto;
}
#cover {
position: fixed;
top: 0;
left: 0;
background: #000000;
z-index: 5;
width: 100%;
height: 100%;
display: none;
}
#photoEnlarged {
height: 635px;
width: 850px;
margin: 0 auto;
position: relative;
z-index: 10;
display: none;
background: url(Cardinal1.jpg);
background-size: cover;
border-color: #FFFFFF;
border-style: double;
border-width: 5px;
}
#photoEnlarged:target, #photoEnlarged:target + #cover {
display: block;
opacity: 2;
}
.cancel {
background: #000000;
color: #FFFFFF;
display: block;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 3px;
right: 2px;
height: 30px;
width: 30px;
text-decoration: none;
text-align: center;
}
</style>
<html>
<body>
<div class="topnav">
<img class="imgIcon" src="Owl.jpg" alt="Owl">
<a href="#about">Birds</a>
<b href="#contact">Code</b>
<b href="#radio">Radio</b>
<b href="#news">Resume</b>
</div>
<h2>C A R D I N A L</h2>
<div class="photosContainer">
<div class="photoFrame">
<a onclick="myFunction('Cardinal2.jpg')" href="#photoEnlarged">
<img class="imgBird" src="Cardinal1.jpg">
</a>
</div>
<div class="photoFrame">
<img class="imgBird" src="Cardinal2.jpg">
</div>
<div class="photoFrame">
<img class="imgBird" src="Cardinal3.jpg">
</div>
<div class="photoFrame">
<img class="imgBird" src="Cardinal4.jpg">
</div>
</div>
<div id="photoEnlarged">
<a href="#" class="cancel"> × </a>
</div>
<div id="cover"></div>
<br><br><br><br><br><br>
<script>
function myFunction(newURL) {
var x = document.getElementById("photoEnlarged");
x.style.backgroundImage = URL(newURL);
};
</script>
</body>
</html>
最佳答案
我假设您正在尝试更改页面的背景图像以匹配特定图像的点击事件。为此，您需要使用 JavaScript。我附上了一个示例，展示了如何实现这一目标。
var imageClass = document.getElementsByClassName('image-class');
console.log(imageClass[1]);
for(var i = 0; i < imageClass.length; i++) {
imageClass[i].onclick = function() {
backgroundChanger(this);
}
}
function backgroundChanger(element) {
var imageSrc = element.src;
document.body.style.backgroundImage='url('+imageSrc+')';
}body {
background-image: url("https://cdn.pixabay.com/photo/2017/07/18/18/24/dove-2516641_960_720.jpg");
background-color: #cccccc;
background-repeat: no-repeat;
}
.image-container {
position: absolute;
top: 25%;
}
.image-class {
width: 25%;
height: 25%;
}<body>
<div class='image-container'>
<img class='image-class' src="https://cdn.pixabay.com/photo/2017/05/08/13/15/spring-bird-2295436_960_720.jpg" />
<img class='image-class' src="https://cdn.pixabay.com/photo/2015/11/16/16/28/bird-1045954_960_720.jpg" />
</div>
</body>
</html>关于javascript - Oclick - 更改元素的背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56739598/