blocks|key|1345658|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1345659|img{border:0;}|code-block|syntax|javascript|1345660|您还可以限制范围并仅删除某些图像的边框，方法如下：|1345661|.myClass+img{border:0;}|1345662|有关边框css属性的更多信息，可以通过here找到。|offset|length|1345663|编辑:将边框从0px更改为0。正如注释中所解释的，对于0的一个单元，px是多余的。|style|CODE|1345664|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/css/css_border.asp^0|0|0|0|0|J|4|0|0|7|3|D|1|R|1|Y|2|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@$M|15|N|16|1|17]]|A|$]]|$1|O|3|P|5|6|7|18|8|@$M|19|N|1A|Q|R]|$M|1B|N|1C|Q|R]|$M|1D|N|1E|Q|R]|$M|1F|N|1G|Q|R]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

Try this:

<pre><code>img{border:0;}
</code></pre>

You can also limitate the scope and only remove border on some images by doing so:

<pre><code>.myClass img{border:0;}
</code></pre>

More information about the border css property can by found <a href="http://www.w3schools.com/css/css_border.asp" rel="noreferrer">here</a>.

Edit: Changed border from <code>0px</code> to <code>0</code>. As explained in comments, <code>px</code> is redundant for a unit of <code>0</code>.

blocks|key|1130409|text|你在图像标签上有什么类？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1130410|尝尝这个|1130411|<img+src="/images/myimage.jpg"+style="border:none;"+alt="my+image"+/>|code-block|syntax|javascript|1130412|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

What class do you have on the image tag?

Try this

<pre><code>&lt;img src="/images/myimage.jpg" style="border:none;" alt="my image" /&gt;
</code></pre>

blocks|key|1130458|text|我相信你也需要给你的图标元素添加边框:+none样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1130459|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I do believe you need to add the border: none style to your icon element as well.

blocks|key|1345858|text|可能会在a.info:hover+span或text-decoration:none下添加border:none|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1345859|entityMap^0|4|H|M|K|19|B|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

maybe add <code>border:none</code> to under <code>a.info:hover span</code> or <code>text-decoration:none</code>

blocks|key|1345904|text|我通常在css文件的顶部使用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1345905|img+{
+++border:+none;
}|code-block|syntax|javascript|1345906|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I usually use this on the top of css file.

<pre><code>img {
 border: none;
}
</code></pre>

blocks|key|1345947|text|感谢你的回答，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1345948|Internet+Explorer的边框被移除，但Firefox的边框在那里。|1345949|因此，我将这个类添加到img中|offset|length|style|CODE|1345950|.clearBorder{border:none;}|code-block|syntax|javascript|1345951|它成功了！|1345952|entityMap^0|0|0|B|3|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@$F|V|G|W|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|X|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Thank for the answers,

The border is removed for Internet Explorer, but this there for Firefox.

So, I added this class to the <code>img</code>:

<pre><code>.clearBorder{border:none;}
</code></pre>

And it worked!

blocks|key|1346010|text|使用重置CSS是个好主意。将此代码添加到CSS文件的顶部|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1346011|img,+a+{border:none,+outline:+none;}|code-block|syntax|javascript|1346012|希望这能有所帮助|1346013|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

it's a good idea to use a reset CSS.
add this at the top of your CSS file

<pre><code>img, a {border:none, outline: none;}
</code></pre>

hope this helps

blocks|key|1346111|text|我意识到这是一个非常老的帖子，但我遇到了一个类似的问题，我显示的图像总是有一个边框。我试着用一张图片填充浏览器窗口。添加诸如border:none；之类的样式不会删除边框，也不会删除边距:0；或填充:0；或三者的任意组合。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1346112|但是，添加位置:绝对；顶部:0；左侧:0；修复了这个问题。|1346113|上面的原始帖子有position:absolute；但没有top:0;left:0；这是在我的页面上添加一个默认边框。|1346114|为了说明解决方案，这里有一个白色边框(准确地说，它有一个顶部和左侧偏移)：|1346115|<img+src="filename.jpg"
style="width:100%25;height:100%25;position:absolute;">|code-block|syntax|javascript|1346116|这没有边框：|1346117|<img+src="filename.jpg"
style="width:100%25;height:100%25;position:absolute;top:0;left:0;">|1346118|希望这能帮助人们找到这篇文章来解决类似的问题。|1346119|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

I realize this is a very old post, but I encountered a similar issue in which my displayed image always had a border around it. I was trying to fill the browser window with a single image. Adding styles like border:none; did not remove the border and neither did margin:0; or padding:0; or any combination of the three.

However, adding position:absolute;top:0;left:0; fixed the problem.

The original post above has position:absolute; but does not have top:0;left:0; and this was adding a default border on my page.

To illustrate the solution, this has a white border (to be precise, it has a top and left offset):

<pre><code>&lt;img src="filename.jpg"
style="width:100%;height:100%;position:absolute;"&gt;
</code></pre>

This does not have a border:

<pre><code>&lt;img src="filename.jpg"
style="width:100%;height:100%;position:absolute;top:0;left:0;"&gt;
</code></pre>

Hopefully this helps someone finding this post looking to resolve a similar problem.

blocks|key|1130799|text|以下是我如何摆脱我的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1130800|.main+.row+.thumbnail+{
++++display:+inline-block;
++++border:+0px;
++++background-color:+transparent;
}|code-block|syntax|javascript|1130801|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's how I got rid of mine:

<pre><code>.main .row .thumbnail {
 display: inline-block;
 border: 0px;
 background-color: transparent;
}
</code></pre>

blocks|key|1130811|text|<img+id="instapic01"+class="samples"+src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1130812|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;img id="instapic01" class="samples" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/&gt;
</code></pre>

blocks|key|1130922|text|另外，在html中，记得删除结束标记和开始标记之间的所有空格/换行符/制表符。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1130923|即使边框属性设置为0，<img+src='a.png'+/>+<img+src='b.png'+/>也将始终在图像之间显示空格，而<img+src='a.png'+/><img+src='b.png'+/>则不会。|offset|length|style|CODE|1130924|entityMap^0|0|B|13|1T|12|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|I|$]]

Also, in your html, remember to delete all blanks / line feeds / tabs between the closing tag and the opening tag. 

<code>&lt;img src='a.png' /&gt; &lt;img src='b.png' /&gt;</code> will always display a space between the images even if the border attribute is set to 0, whereas <code>&lt;img src='a.png' /&gt;&lt;img src='b.png' /&gt;</code> will not.

blocks|key|1130991|text|我在img标签中遇到了类似的问题，我添加了下面一行img标签。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1130992|<img+class="my-class">|code-block|syntax|javascript|1130993|这是css类|1130994|.my-class{
++++background-image:+url('add.gif');
++++background-repeat:+no-repeat;
++++display:+inline-block;
++++width:+27px;
++++height:+27px;
}|1130995|我将img标记更改为具有相同css类的span标记。边框现在不可见。|1130996|<span+class="my-class">|1130997|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I faced similar problem with img tag
I had added following line with img tag.

<pre><code>&lt;img class="my-class"&gt;
</code></pre>

And this is the css class

<pre><code>.my-class{
 background-image: url('add.gif');
 background-repeat: no-repeat;
 display: inline-block;
 width: 27px;
 height: 27px;
}
</code></pre>

I changed the img tag to span tag with same css class. Border is not visible now.

<pre><code>&lt;span class="my-class"&gt;&lt;/span&gt;
</code></pre>

blocks|key|1346365|text|img+{
++text-indent:+-20000px;+/*some+large+value*/
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1346366|为我做了这件事(对于Chrome)。这也将删除alt图标，这一点值得注意。|unstyled|offset|length|style|CODE|1346367|entityMap^0|0|N|3|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>img {
 text-indent: -20000px; /*some large value*/
}
</code></pre>
did the trick for me (for Chrome). This will remove the <code>alt</code> icon as well, something to note.

blocks|key|1346414|text|使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1346415|div+{
++background:+url()
}|code-block|syntax|javascript|1346416|而不是<img>。在带有背景图像的div中没有边框。|offset|length|style|CODE|1346417|entityMap^0|0|0|3|5|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Use:
<pre><code>div {
 background: url()
}
</code></pre>
instead of <code>&lt;img&gt;</code>.
There is no borders in the div with background image.

blocks|key|1346422|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1346423|<img+width="30"+height="30"/>|code-block|syntax|javascript|1346424|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this
<pre><code>&lt;img width=&quot;30&quot; height=&quot;30&quot;/&gt;
</code></pre>

I try to display a span when the cursor of the mouse is on a help icon.

It works, but nevertheless, I don't manage to remove the border around the icon.

My CSS :

<pre><code>.info{
 position:absolute;
 border:none;
}

a.info{
 position:absolute; 
 z-index:24; 
 background:none;
 color:#000;
 text-decoration:none
}

a.info:hover{
 z-index:25; 
 background-color:#FFF;
 cursor:help;
}

a.info span{
 display: none
}

a.info:hover span{ 
 display:block; 
 position:absolute;
 cursor:help;
 bottom:0px; 
 left:26px; 
 width:150px;
 padding:4px;
}
</code></pre>

cd

How remove border around image in css?

图像标签

当鼠标光标位于帮助图标上时，我尝试显示范围。它可以工作，但尽管如此，我还是没能移除图标周围的边框。我的CSS：.info{    position:absolute;    border:none;}a.info{    position:absolute;     z-index:24;     background...

问如何在css中删除图像周围的边框？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在css中删除图像周围的边框？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在css中删除图像周围的边框？
EN