0

asp.net での女の子の画像の表示に問題があります。次の結果を達成したい：

ここに画像の説明を入力

問題は、以下のように少女の顔が表示されないことです。

ここに画像の説明を入力

これが私が作ったCSSです：

.testimonialstilabel {
    background-image: url(../images/testimonialstilabel.png);
    height: 100px;
}
.testimonialstilabelback {
    background-image: url(../images/testimonialstilabel2.png);
    height: 253px;
    width: 500px;
}
.imgeCoverBack {
    height: 149px;
    width: 107px;
    position: absolute;
    top: 112px;
    left: 22px;
}
.imgeCover {
    background-image: url(../images/testimonialstilabelimg.png);
    height: 216px;
    width: 138px;
    position: absolute;
    top: 109px;
    left: 6px;
}

以下はasp.netコードです

   <div class="container clearfix">
            <div class="testimonialstilabel">
                <br>
                <h2 align="center">
                    Great things people are saying about us</h2>
            </div>
            <asp:DataList ID="DataListT" runat="server" RepeatDirection="Horizontal" RepeatColumns="2"
            Width="100%">
            <ItemTemplate>
            <div class="testimonialstilabelback">
                <asp:Image ID="Image2" runat="server" ImageUrl='<%#Eval("ImageUrlPath")%>' class="imgeCoverBack"/>                
               <div class="imgeCover">
                </div>
                <p style="width: 300px; margin-left: 150px; height: 175px; margin-top: 0px; padding:17px 0px 0px 0px"">
                    <%#Eval("Description")%>
                </p>
                <p style="text-align: justify; font-weight: bold; width: 300px; margin-left: 150px;
                    color: #74a6a5; padding: 0px 0px 0px 5px;">
                    &#8226; <%#Eval("Name")%>
                </p>
            </div>
            </ItemTemplate>
        </asp:DataList>
        </div>

CSS に問題があることはわかっています。私がそれでやっている間違いは何だったのか教えてください。誰かこれについて何か考えがありますか？

4

2 に答える 2

1 
.testimonialstilabelback {
    ...
    position:relative;
}
于 2013-11-01T13:32:48.523 に答える
0

こんにちは、position:absoluteこれは、要素が配置されると宣言された非絶対位置を持つ最も近い親を検索していることを意味します。

この場合、要素の直接の親を相対的にする必要があります

<div class="testimonialstilabelback">

CSSでこの変更を行います

.testimonialstilabelback {
  background-image: url(../images/testimonialstilabel2.png);
  height: 253px;
  width: 500px;
  position:relative;
}
于 2013-11-01T13:54:01.737 に答える