Question

以前，我有一排5个画布元素，如下所示，日期显示在每个元素的下方：

<div class="clock">

<div class="clockwrapper">
    <canvas id="piechart0" width="150" height="150"></canvas>
    <div class="date" id="day0"></div>
    <div class="date1" id="date0"></div>
</div>
<div class="clockwrapper">
    <canvas id="piechart1" width="150" height="150"></canvas>
    <div class="date" id="day1"></div>
    <div class="date1" id="date1"></div>
</div>
<div class="clockwrapper">
    <canvas id="piechart2" width="150" height="150"></canvas>
    <div class="date" id="day2"></div>
    <div class="date1" id="date2"></div>
</div>
<div class="clockwrapper">
    <canvas id="piechart3" width="150" height="150"></canvas>
    <div class="date" id="day3"></div>
    <div class="date1" id="date3"></div>
</div>
<div class="clockwrapper">
    <canvas id="piechart4" width="150" height="150"></canvas>
    <div class="date" id="day4"></div>
    <div class="date1" id="date4"></div>
</div>

现在我想在画布上添加一个略微透明的图像，这样我在画布上绘制的内容就显示出来了。但是，当我将第一个clockwrapper改为此时，

    <img src="images/clock2.jpg" id="imgclock1" width="150" height="150" class="analog"/>
    <canvas id="piechart0" width="150" height="150" style="position: relative; top: -150px; left: 0px; opacity: .5"></canvas>
    <div class="date" id="day0"></div>
    <div class="date1" id="date0"></div>

接下来的四个画布下拉一行，我必须将piechart0的顶部样式更改为-150px，以便它们可以重叠。以下是每个类的样式：

canvas {
    padding-top: 0px;
    display: inline;
    margin-left: auto;
    margin-right: auto;
    left: 25%
}
.date {
    display: inline;
    padding-left: 0px;
    color: white;
    margin-left: 120px;
    font-weight: bold;
    text-align: center;
}
.date1 {
    display: inline;
    padding-left: 10px;
    color: white;
    text-align: center;
}
.clockwrapper {
    display: inline-block;
    margin: 30px 0px 0px 50px;
    width: 150px;
    height: 150px;
}

我需要使用img样式进行更改，以便 A。）画布和图像可以重叠（这是通过顶部：-150px为画布完成）和 B 。）所有画布对象都出现在同一行。

Answer 1

这是你的开始

＆＃13;

.clock {
    white-space: nowrap;     /*  keep all wrappers on same line  */
}
canvas {
    padding-top: 0px;
    display: inline;
    margin-left: auto;
    margin-right: auto;
    left: 25%
}
.date {
    display: inline;
    padding-left: 0px;
    color: white;
    margin-left: 120px;
    font-weight: bold;
    text-align: center;
}
.date1 {
    display: inline;
    padding-left: 10px;
    color: white;
    text-align: center;
}
.clockwrapper {
    display: inline-block;
    margin: 30px 0px 0px 50px;
    width: 150px;
    height: 150px;
    display: relative;
    background: #eee;    /*  just to get the wrapper visible in this sample  */
}
.clockwrapper img {
    position: absolute;
    left: 50px;          /*  adjust to get it in position  */
    top: 30px;           /*  adjust to get it in position  */
    width: 150px;
    height: 150px;
    background: #f99;    /*  just to get the img visible in this sample  */
}

＆＃13;

<div class="clock">
  <div class="clockwrapper">
    <canvas id="piechart0" width="150" height="150"></canvas>
    <div class="date" id="day0"></div>
    <div class="date1" id="date0"></div>
   <img src="images/clock2.jpg" id="imgclock1" width="150" height="150" class="analog"/>
  </div>
  <div class="clockwrapper">
    <canvas id="piechart1" width="150" height="150"></canvas>
    <div class="date" id="day1"></div>
    <div class="date1" id="date1"></div>
  </div>
  <div class="clockwrapper">
    <canvas id="piechart2" width="150" height="150"></canvas>
    <div class="date" id="day2"></div>
    <div class="date1" id="date2"></div>
  </div>
  <div class="clockwrapper">
    <canvas id="piechart3" width="150" height="150"></canvas>
    <div class="date" id="day3"></div>
    <div class="date1" id="date3"></div>
  </div>
  <div class="clockwrapper">
    <canvas id="piechart4" width="150" height="150"></canvas>
    <div class="date" id="day4"></div>
    <div class="date1" id="date4"></div>
  </div>
</div>

＆＃13;

当我重叠图像和画布时，我无法让它保持一致

1 个答案: