0

I have an issue with display girl image in asp.net. I want to achieve the following result:

enter image description here

The issue is that the girl's face does not appear as seen below:

enter image description here

Here is the CSS I made:

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

Here is a asp.net code below

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

I know that there is a issue with my CSS. Please help me out what was the mistake I'm doing in it. Does anyone have any idea about this?

4

2 回答 2

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

嗨，您正在使用position:absolute这意味着该元素正在搜索他最近的父级，其中声明了一个非绝对位置。

在这种情况下，您需要将 relative 作为元素的直接父级

<div class="testimonialstilabelback">

在 CSS 中进行此更改

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