html css 粘性等

Question

对于下面的代码，我有两个问题:

1. 背景图像 cereal.jpeg 可以正常工作，现在由于某种原因，它消失了，我不明白为什么。因为它曾经有效，所以我知道文件名和位置是正确的。

2. 我的控件拒绝保持粘性!

div.container {
  border-style: solid;
  border-width: thin;
  border-color: grey;
  box-shadow: 10px 15px 8px black;
  height: 1500px;
  width: 700px;
}

div.container::before {
  background-image: url("cereal.jpeg");
  background-repeat: repeat;
  opacity: 0.05;
}

div.controls {
  float: left;
  width: 140px;
  border: 1px solid lightgrey;
  position: -webkit-sticky; // Safari
  position: sticky;
  top: 0;
}

div.thePlots {
  float: left;
  border: 1px solid lightgrey;
  width: 400px;
  height: 1400px;
}

<div id=container class=container>
  <div class=controls id=controls>
    <label id="brand">Brand:</label>
    <br>
    <select size=7 id="brandOptions" multiple>
      <option value=0 selected>All</option>
      <option value=1>Kellog</option>
      <option value=2>Post</option>
      <option value=3>Quaker</option>
      <option value=4>General Mills</option>
      <option value=5>Tree House</option>
      <option value=6>CPW</option>
    </select>

    <br><br><br>

    <label id="barsLabel">Error Bars:</label>
    <input id=barsPresent type=checkbox value="Error Bars" checked>

    <br><br><br>

    <label id="label">Elasticity<br>Means:</label>
    <br>
    <select id="plotY">
      <option value="efm" selected="selected">efm</option>
      <option value="enm">enm</option>
    </select>
    <br><br><br>
  </div>

  <div class=thePlots id=thePlots>
    The Plots<br>
    <div class="tooltip" id="tooltip"></div>
    <div id="plotshare" class="plotshare"></div>
    <div id="plotprice" class="plotprice"></div>
    <div id="plotsugar" class="plotsugar"></div>
    <div id="plotmushy" class="plotmushy"></div>
  </div>
</div>

Answer 1

1. 不透明度 太低。
2. 移除float:left;