1

嗨，当悬停在下面的其他三个框时，我无法在顶部中间的框中显示背景图像。现在只显示文本。感谢您的任何帮助，您可以提供。如果您需要更多说明，请告诉我。

我相信这是问题代码：

 document.getElementById('message').style.backgroundImage = `"url('${element.src}')";`;
        console.log(`"url('${element.src}')";`);
}

这是代码笔： https ://codepen.io/vaughnick/pen/VygjZw

4

2 回答 2

1

你必须改变它 "url('${element.src}')"；这样做 `url(${element.src})`;

function showProperties(element){
  document.getElementById('message').innerHTML = element.alt;
          document.getElementById('message').style.backgroundImage = `url(${element.src});`;
        console.log(`url(${element.src})`);
}
body{
		margin: 2%;
		border: 1px solid black;
		background-color: #b3b3b3;
}
#message{
    line-height:100px;
    text-align:center;
		width: 575px;
    height: 100px;
		border:5px solid black;
		margin:0 auto;
    margin-bottom:10px;
    background-color: #8e68ff;
    background-image: url('');
    font-size: 150%;
}
.preview{
		width:10%;
		margin-left:17%;
    border: 10px solid black;
}
img{
		width:95%;
}
<h1> This and Template Literals</h1>
	<div id = "message">
		Hover over an image to display the alt text.
	</div>
	
	<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover = "showProperties(this)" onmouseleave = "document.getElementById('message').innerHTML='Hover over an image';">
	
	<img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover = "showProperties(this)" onmouseleave =  "document.getElementById('message').innerHTML='Hover over an image';">
	
	<img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" onmouseover = "showProperties(this)" onmouseleave =  "document.getElementById('message').innerHTML='Hover over an image';">

于 2018-01-20T10:27:47.937 回答
1

您需要删除url().

document.getElementById('message').style.backgroundImage = `url('${element.src}')`;
//                                                         ^                     ^ without
//                                                                                 "
于 2018-01-20T10:34:27.627 回答