Question

我正在尝试在我的图表后面添加一个背景图片，但是当我这样做时，图形会在背景图像的前面但不再有效（即没有交互，动画可以工作等）

有人可以告诉我为什么或者为我修复我的代码以便它有效吗？背景图片代码是'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>

Answer 1

正如你对英雄身份所做的那样：

#hero{
    background-image: url('images/background.png');
    [...]
    top: 0;
    z-index: -10;
 }

您应该对chartContainer ID执行相同的操作：

#chartContainer{
    z-index: 10;
}

z-index最高值将位于具有较低值

的其他元素之上

点击此链接了解详情：All About.... Z-Index?

当我在其后面添加背景图片时，为什么我的图形不再起作用？

1 个答案: