[英]background image does not show up with no-repeat
I'm trying to place a small icon inside the ValidationSummary div (to the left of the bullet list). 我正在尝试在ValidationSummary div(项目符号列表的左侧)内放置一个小图标。 The image shows up, but with repeat when I use:
图像显示出来,但是当我使用时重复:
background:url(Images/exclamation.png);
The image does not show at all, when I say: 当我说:该图像完全不显示时:
background:url(Images/exclamation.png) no-repeat 12px 30px;
What am I missing here. 我在这里想念什么。
CSS: CSS:
.validationsummary
{
background:url(Images/exclamation.png) no-repeat 12px 30px;
border:1px solid #b08b38;
width:99%;
}
.validationsummary ul
{
color:#982b12;
background-color:PeachPuff;
}
.validationsummary ul li
{
padding:2px 0px 0px 15px;
font-size:12px;
}
ASPX: ASPX:
<table width="100%">
<tr>
<td width="100%">
<asp:ValidationSummary ID="vs" runat="server" CssClass="validationsummary"
DisplayMode="BulletList" />
</td>
</tr>
</table>
<table width="100%" cellspacing="10px">
<tr>
<td width="11%" align="left">
* Surname
</td>
<td width="18%" align="left">
<asp:TextBox ID="txtSurname" runat="server" Width="93%"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtSurname" SetFocusOnError="true" Text="*" ForeColor="Red"
Display="Dynamic" ErrorMessage="Surname Is Required"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
Try 尝试
.validationsummary
{
background:url(Images/exclamation.png) no-repeat 0 0;
border:1px solid #b08b38;
width:99%;
}
If it is working, position your background accordingly. 如果工作正常,请相应调整背景。
background-image:url('Images/exclamation.png'); background-image:url('Images / exclamation.png');
background-repeat-x: no-repeat; background-repeat-x:不重复;
background-repeat-y: no-repeat; background-repeat-y:不重复;
Also define the height of your background image 同时定义背景图片的高度
.validationsummary
{
background:url(Images/exclamation.png) no-repeat 12px 30px;
border:1px solid #b08b38;
width:99%;
height: 200px; /* change it with your requirement */
}
.validationsummary
{
background-image: url('Images/exclamation.png);
background-repeat: no-repeat;
background-position: left top;
background-size: 16px;
padding-left: 20px; /* Depends on the size of the image - 16px + 4px actual padding to indent the text to the right of the image */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.