html - 在同一行的图像上重叠透明阴影

Question

我试图让某些阴影(介于 4 或 6 之间，具有透明度)与网页一行上的一些图像重叠。 Desired Outcome

下面的 HTML 代码垂直堆叠图像，而不是像透明阴影那样并排堆叠:

<div class = "component" style = "width: 1000px; height: 751px; background:             url(testimg.jpg)">
  <div class = "temperature" style = "background-color: #B80000; width: 500px; height: 751px; opacity: 0.6"></div>
  <div class = "temperature" style = "background-color: #680000; width: 500px; height: 751px; opacity: 0.6"></div>
</div>
<div class = "component" style = "width: 1000px; height: 751px; background: url(testimg.jpg)">
</div>

如何正确显示？

Answer 1

您需要将这些组件向左浮动:

<div class = "component" style = "width: 1000px; height: 751px; background:             url(testimg.jpg)">
<div class = "temperature" style = "float: left; background-color: #B80000; width: 500px; height: 751px; opacity: 0.6"></div>
<div class = "temperature" style = "float: left; background-color: #680000; width: 500px; height: 751px; opacity: 0.6"></div>
</div>
<div class = "component" style = "width: 1000px; height: 751px; background: url(testimg.jpg)">
</div>

请参阅此 JSFiddle:http://jsfiddle.net/79ny3/