0
我正在用各種圖形圖像定位（或更準確地說，組合）各種圖形，以形成使用CSS的完整圖像和。我這樣做的原因是（最終），當我將它們正確放置在我正在構建的網站的標題中時，我將能夠使用緩動CSS動畫將它們放在一起。使用CSS定位圖像時的困難
的大局觀包括以下圖形圖像：
我希望它看起來的方式是這樣的：
有了，我有下面的CSS，它看起來像這樣：
這裏是CSS和HTML代碼：
.clip_frame
/* used to clip the contents as in the case of an image frame */
{
overflow: hidden;
}
.middleContent {
text-align: center;
position: relative;
}
.middleContent > img {
display: inline-block;
}
.centervertical {
display: inline-block;
vertical-align: middle;
}
.header-left {
float: left;
margin-left: 0;
position: relative;
}
.header-left-top {
vertical-align: top;
position: absolute;
}
.header-left-bottom {
vertical-align: bottom;
position: absolute;
}
.header-right {
float: right;
margin-right: 0;
position: relative;
}
.header-right-top {
vertical-align: top;
margin-top: 0;
position: absolute;
}
.header-right-bottom {
vertical-align: bottom;
margin-bottom: 20;
position: absolute;
}
.center-top {
text-align: center;
vertical-align: top;
}
.center-top > img {
display: inline-block;
position: absolute;
z-index: 1;
}
.center-bottom {
text-align: center;
vertical-align: bottom;
}
.center-bottom > img {
display: inline-block;
position: absolute;
z-index: 2;
}<?php /* Wrapper Name: Header */ ?>. . .
<div class="row">
<div class="middleContent">
<div class="clip_frame centervertical">
<div class="clip_frame header-left">
<span class="clip_frame header-left-top">
<img src="http://i.stack.imgur.com/YuJmJ.gif" alt="" width="500" height="6px"/>
</span>
<img src="http://i.stack.imgur.com/1KDly.gif" alt="" width="500" height="80" />
<span class="clip_frame header-left-bottom">
<img src="http://i.stack.imgur.com/YuJmJ.gif" alt="" width="500" height="6px"/>
</span>
</div>
</div>
<div class="clip_frame centervertical">
<span class="clip_frame center-top">
<img src="http://i.stack.imgur.com/kujPV.gif" alt="" width="238" height="70"/>
</span>
<span class="clip_frame" data-motopress-type="static" data-motopress-static-file="static/static-logo.php">
<img src="http://i.stack.imgur.com/fOmBd.gif">
</span>
<span class="clip_frame center-bottom">
<img src="http://i.stack.imgur.com/DpZ1l.gif" alt="" width="238" height="70"/>
</span>
</div>
<div class="clip_frame centervertical">
<div class="clip_frame header-right">
<span class="clip_frame header-right-top">
<img src="http://i.stack.imgur.com/YuJmJ.gif" alt="" width="500" height="6px"/>
</span>
<img src="http://i.stack.imgur.com/1KDly.gif" alt="" width="500" height="80" />
<span class="clip_frame header-right-bottom">
<img src="http://i.stack.imgur.com/YuJmJ.gif" alt="" width="500" height="6px"/>
</span>
</div>
</div>
</div>
</div>我已經嵌入到PHP頭文件包裝中：
請注意，我使用WordPress的Cherry框架，因此「行」類選擇器的定義不是由我正在開發的主題定義的。然而，它的目的是將文本/圖像垂直對齊到表格的行中，這顯然是Cherry Framework用來構造每個頁面的標題。儘管如此，我不認爲這會干擾我試圖達成的目標。糾正我，如果我錯了....任何意見和/或反饋，包括使用緩動css動畫的建議，將不勝感激。
N.B.我正在使用的實際徽標不是我在此提供的徽標。它實際上是一個灰度182x182 gif圖像。
我認爲它可以固定使用'top'，'bottom'，'right'，'left'值。 –
@Amitsingh - 謝謝阿米特，我已經試過了 - 沒有區別，除非我沒有正確地做。...... – Bill
你能爲此設置一個小提琴嗎？ – MKD