我正在尝试在我的图表后面添加背景图片，虽然当我这样做时图表会在背景图片前面但不再有效(即没有交互、动画工作等)
谁能告诉我原因，或者为我修复我的代码以使其正常工作？背景图像代码是“div id hero”，一旦我在图形代码下方添加结束标记，它就不起作用了……这是我的代码:
<?php
//Database connection (localhost,username,password,databasename)
$con = mysqli_connect("localhost", "katie", "katie", "movies");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
else
// Print connection successful if no error
{
echo "Connection still Successful </br>";
}
// Select all fields from the database
$sql = "SELECT * FROM TABLE_1";
//$sql = "SELECT * FROM 'TABLE 1' WHERE Movie Title =Star Wars:TheForceAwakens";
$result = mysqli_query($con, $sql);
//echo var_dump($result);
// Check if database is not empty if not print data of each row
// create array
$emparray = array();
while($row = mysqli_fetch_assoc($result))
{
$chart_gross .= "{label:'" .$row["Movie Title"]. "', y:'" .$row["Gross"]. "'},";
$chart_votes .= "{label:'" .$row["Movie Title"]. "', y:'" .$row["Votes"]. "'},";
$chart_data .= "{label:'" .$row["Movie Title"]. "', y:'" .$row["Votes"]. "'},";
}
//Close database connection
mysqli_close($con);
?>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<title> 2015 Movie Title Gross and Votes</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
color: #000000;
}
p {font-size: 16px;}
.margin {margin-bottom: 45px;}
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
#hero {
background-image: url('images/background.png');
background-size: cover;
background-position: center center;
position:relative;
top: 0;
bottom: 0;
height: 100vh;
z-index: -10;
}
</style>
</head>
<body>
<div id="hero">
<div id ="hero-overlay"></div>
</div>
<div id="chartContainer" style="height: 75%; max-width: 80%; margin:0px auto;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
interactivityEnabled: true,
zoomEnabled:true,
backgroundColor: "#ff7f7f",
title:{
text: "Movie Title Votes and Gross, 2015"
},
subtitles: [{
text: "Click Legend to Hide or Unhide Data Series....View specific data and reveal all/more movie titles by click and dragging to zoom"
}],
axisX:{
title: "Movie Titles"
},
axisX:{
labelFontSize: 8
},
axisY: {
title: "Votes",
titleFontColor: "#4F81BC",
lineColor: "#4F81BC",
labelFontColor: "#4F81BC",
tickColor: "#4F81BC"
},
axisY2: {
title: "Gross",
titleFontColor: "#C0504E",
lineColor: "#C0504E",
labelFontColor: "#C0504E",
tickColor: "#C0504E"
},
toolTip: {
shared: true
},
legend: {
cursor:"pointer",
itemclick: toggleDataSeries
},
data: [{
type: "column",
name: "Gross",
showInLegend: true,
legendText: "Gross",
yValueFormatString: "#,##0.# Units",
dataPoints:[<?php echo $chart_gross;?>]
},
{
type: "column",
name: "Votes",
legendText: "Votes",
axisYType: "secondary",
showInLegend: true,
yValueFormatString: "#,##0.# Units",
dataPoints:[<?php echo $chart_votes;?>]
}]
});
chart.render();
function toggleDataSeries(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
e.chart.render();
}
}
</script>
<<div class="container-fluid bg-3 text-center">
<div class="row">
<h3 class="margin">Total Earnt From Top 10 - 4,004.83BN US Dollars</h3><br>
<p>This chart shows the gross earnt from US Box Office Sales of each individual Film of 2015</p>
<div class="col-sm-4">
<img src="images/icon_action.png" class="img-responsive margin" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<img src="images/icon_scifi.png" class="img-responsive margin" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<img src="images/icon_action.png" class="img-responsive margin" style="width:100%" alt="Image">
</div>
</div>
</div>
</body>
</html>
最佳答案
正如您对英雄 ID 所做的那样:
#hero{
background-image: url('images/background.png');
[...]
top: 0;
z-index: -10;
}
你应该对 chartContainer ID 做同样的事情:
#chartContainer{
z-index: 10;
}
z-index 最高值将位于其他具有较低值的元素之上
查看此链接以获取更多信息:All About.... Z-Index?
关于javascript - 为什么我在图形后面添加背景图像后不再起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50160034/