css:文本框上的白色背景边框来自哪里?
我有以下页面:
http://www.jameschang.com/faxlogic/
其中文本框有这些白色边框位于右上角登录部分的 4 个角上。
我对这些文本框有以下 css 属性:有
.HeaderLoginField {
background-image: url(../content/login_field.png);
float: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #969696;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
height: 25px;
width: 160px;
text-indent: 3px;
background-color: #0F0F0F;
background-repeat: no-repeat;
font-weight: normal;
}
什么想法为什么会发生这种情况吗?我已将 png 图像更改为 gif,但它们消失了,但我想使用 png。有什么想法为什么会发生这种情况吗?
提前致谢
I have the following page:
http://www.jameschang.com/faxlogic/
where the textboxes have these white borders on on their 4 corners in the upper right login section.
I have the following css attributes for those textboxes:
.HeaderLoginField {
background-image: url(../content/login_field.png);
float: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #969696;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
height: 25px;
width: 160px;
text-indent: 3px;
background-color: #0F0F0F;
background-repeat: no-repeat;
font-weight: normal;
}
any ideas why this might be happening? I have changed the png images to a gif and they go away however i want to use png. Any ideas why this is happening?
thanks in advance
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
它绝对是您正在使用的图像,我使用 firebug 检查了该元素,当禁用/启用背景图像时,白色角消失了!
Its definitely the image you're using, i inspected the element using firebug and when disabled/enabled the background image, the white corners went away!
它的背景图像,
你可以制作一个新图像,
或者使用 css 获得您想要的外观。
its the background image,
you can make a new image,
or get the look you want using css.
它是图形:
url("../content/login_field.png")
,它似乎对白色背景而不是黑色背景进行了抗锯齿处理。 png 可以使用透明度来代替背景而工作。It's the graphics:
url("../content/login_field.png")
which seems to be anti aliased to a white background instead of black. The png could use transparency instead to work regardless of background.您是否忘记打开 PNG 文件的透明度?
Did you forget to turn on transparency for your PNG file?
如果您想使用 8 位(索引)PNG 而不是 24 位 PNG,则使用黑色作为遮罩(遮罩是透明图像边缘将混合的颜色)而不是白色,但最好使用带有 alpha 的 24 位 PNG透明度,这样它就可以在任何背景下工作。
If you want to use 8bit (indexed) PNG instead of 24bit PNG, then use black as matte (the matte is the color against which the edges of the transparent image will blend) instead of white, but it's better to use 24bit PNG with alpha transparency, this way it will work on any background.