2016-06-23 6 views
0

Früher im Einklang bleiben erhalten, ich hatte eine Reihe von 5 Canvas-Elemente wie folgt, mit Daten direkt unter jedem von ihnen angezeigt:Wenn ich ein Bild und eine Leinwand überlappen, kann ich es nicht

<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> 

Jetzt möchte ich ein Bild über die Leinwand hinzufügen, die leicht transparent ist, also was auch immer ich auf der Leinwand zeichne durch. Als ich das erste clockwrapper Um dies zu ändern, aber:

<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> 

Die Tropfen der nächsten vier Leinwand nach unten eine Linie und ich habe die Top-Stil piechart0 ändern -150px so können sie sich überlappen. Hier ist der Stil für jede der Klassen:

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; 
} 

Was muss ich mit dem img Stil ändern, so dass A.) Die Leinwand und Bild überlappen können (dies wurde mit der Spitze erreicht: -150px für die Leinwand) und B.) Alle Leinwandobjekte werden in derselben Zeile angezeigt.

+0

Ich empfehle Wechsel 'display: inline;' auf 'Inline-block' für die meisten Ihrer Container und mit' position: relative; ' mit den CSS-Attributen "Oben, Links, Unten" und "Rechts", um sie innerhalb des Containers zu positionieren, der sowohl die Zeichenfläche als auch das Bild enthält. –

Antwort

0

Hier ist ein Anfang für Sie

.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 */ 
 
}
<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>

Verwandte Themen