HTML:
<html>
<body>
<header>
<img class="logo" />
</header>
</body>
</html>
CSS:
* {
margin:0px;
padding:0px;
border:n开发者_如何学Cone;
}
img.logo {
width:126px;
height:50px;
background-image:url('images/logo.png');
}
One way or another everytime i try to style an IMG like this a strange border appears. Even if I would place border:0px; or border:none; in the img.logo css the border remains.
It's the default "special" border that appears when you use an img element with an a src attribute set to something that doesn't exist (or no src at all).
A common workaround is to set the src to a blank.gif file:
<img class="logo" src="blank.gif" />
I have to point out that it (in this case) makes no sense to use an <img> with background-image. Just set the src attribute and forget about background-image.
You can Simply Use div instead of img for background image , if you are not going to use src attribute anywhere.
<div class="logo"> </div>
otherwise src is required.
Combining @thirtydot's answer to this question with @Layke's answer for Smallest data URI image possible for a transparent image, here is an all-in-one solution:
<img class="logo"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
This works for me
img {
text-indent: -999px;
}
I had the same issue, but now the border does not appear.
Solution:
Add following in the img tag in HTML
- src=""
- border="0"
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论