Come rimuovere il bordo attorno all'immagine in css?

Question

Provo a visualizzare uno span quando il cursore del mouse si trova su un'icona di aiuto.

Funziona, ma nonostante tutto, non riesco a rimuovere il bordo attorno all'icona.

mio CSS:

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

cd

Answer 1

Prova questo:

img{border:0;} 

È possibile anche Limitate il campo di applicazione e rimuovere unica frontiera su alcune immagini in questo modo:

.myClass img{border:0;} 

Ulteriori informazioni Per quanto riguarda la proprietà del confine css, è possibile trovare here.

Modifica: bordo modificato da 0px a 0. Come spiegato nei commenti, px è ridondante per un'unità di 0.

Answer 2

Che classe hai sul tag immagine?

Prova questa

<img src="/images/myimage.jpg" style="border:none;" alt="my image" /> 

Answer 3

credo è necessario aggiungere il confine: stile nessuno al vostro elemento icona pure.

Answer 4

magari aggiungere border:none di sotto a.info:hover span o text-decoration:none

Answer 5

io di solito uso questo sulla parte superiore del file css.

img { 
    border: none; 
} 

Answer 6

Grazie per le risposte,

confine è "distruggere" (mi dispiace per il mio inglese) in IE, ma sotto FF, ancora di nuovo. Quindi, provo questo:

.clearBorder {border: none;} e aggiungo questa classe all'img e le regole.

Answer 7

è consigliabile utilizzare un reset CSS. aggiungere questo nella parte superiore del vostro file CSS

img, a {border:none, outline: none;} 

speranza che questo aiuta

Answer 8

Mi rendo conto che questo è un post molto vecchio, ma ho incontrato un problema simile in cui la mia immagine visualizzata ha sempre avuto un bordo intorno ad esso . Stavo cercando di riempire la finestra del browser con una singola immagine. Aggiungere stili come border: none; non ha rimosso il bordo e nemmeno ha fatto margine: 0; o padding: 0; o qualsiasi combinazione dei tre.

Tuttavia, aggiunta posizione: assoluta; in alto: 0; sinistra: 0; risolto il problema

Il post originale sopra ha posizione: assoluto; ma non ha cima: 0; sinistra: 0; e questo stava aggiungendo un bordo predefinito sulla mia pagina.

Per illustrare la soluzione, questo ha un bordo bianco (per la precisione, ha una parte superiore e sinistra offset):

<img src="filename.jpg" 
style="width:100%;height:100%;position:absolute;"> 

Questo non ha un bordo:

<img src="filename.jpg" 
style="width:100%;height:100%;position:absolute;top:0;left:0;"> 

Eventualmente questo aiuta qualcuno a trovare questo post cercando di risolvere un problema simile.

Answer 9

Un'altra cosa - ricordate che se avete un con un attributo vuotosrc, allora nessuno di questi suggerimenti funziona, un bordo sarà ancora ottenere mostrato.

<img src="" style="width:30px;height:30px;"> 

Answer 10

img bisogno src utilizzare confine è di rimozione, i no so un motivo per css è pazzo

data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7 

Quindi cercate esempio con SRC:

img.logo { 
 
\t width: 200px; 
 
    height: 50px; 
 
\t background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left; 
 
}

<img class="logo" src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7">

Quindi cercate esempio senza SRC:

img.logo { 
 
\t width: 200px; 
 
    height: 50px; 
 
\t background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left; 
 
}

<img class="logo">

lol ... css pazzesco! buon divertimento

Answer 11

Ecco come mi sono liberato del mio:

.main .row .thumbnail { 
    display: inline-block; 
    border: 0px; 
    background-color: transparent; 
} 

Answer 12

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