2013-09-23 2 views
2

Я не могу удалить границу с моих изображений. Я много раз пробовал разные атрибуты. Все еще видят белую границу. Если у вас есть какие-либо предложения, что вызывает проблему, пожалуйста, объясните мне. Я любопытный новичок.Я не могу удалить границу

<head> 
    <style> 
    img{ 
    border : none; 
    text-decoration: none; 
    } 
    #forum 
    { 
     background:url(forum_button.png) 0px 0px no-repeat; 
     width: 300px; 
     height: 81px; 

    } 
    #forum:hover 
    { 
     background:url(forum_button.png) -300px 0px no-repeat; 
     width: 300px; 
     height: 81px; 
    } 
    #facebook 
    { 
     background:url(social_buttons.png) 0px 0px no-repeat; 
     width: 29px; 
     height: 29px; 
    } 
    #facebook:hover 
    { 
     background:url(social_buttons.png) 0px -33px no-repeat; 
     width: 29px; 
     height: 29px; 
    } 
    #twitter 
    { 
     background:url(social_buttons.png) -31px 0px no-repeat; 
     width: 29px; 
     height: 29px; 
    } 
    #twitter:hover 
    { 
     background:url(social_buttons.png) -31px -33px no-repeat; 
     width: 29px; 
     height: 29px; 
    } 
    </style> 
    </head> 
    <body style="background:url(landing.png) no-repeat top #111111; width: 1280px; height: 1024px; border:0;"> 
    <a href="#"><img id="forum" /></a> 
    <div id="social"> 
    <a href="#"><img id="facebook"></a> 
    <a href="#"><img id="twitter"></a> 
    </div> 
+0

Вы уверены, что IMG элементы правой ширины и высоты, как изображения, которые вы используете? :) – Pawcu

+0

Я бы посоветовал использовать тег img без атрибута src. –

+1

Показать скриншот и показать изображение, пожалуйста. – MMM

ответ

5

Это потому, что тег img ДОЛЖЕН иметь src = "" с правильной ссылкой, иначе он будет показывать изображение как фон, как в вашем случае (из-за css на img) и сломанное изображение поверх it

="#"><img id="facebook"></ 

Это не граница, что вы видите, это сломанное изображение границы.

Если вы хотите сохранить ваш код, изменить IMG тег в DIV ..

+0

Я думаю, что вы в основном правы. Проблема возникает в Chrome, а не в Firefox. –

+0

Спасибо. Оно работает! : D Я изменился на div, и теперь он работает отлично. Еще раз спасибо! – Ivelios

0

Возможно, граница не указана html, но ее в вашем img?

Так что откройте свое изображение в графическом программном инструменте, таком как Photoshop, и увеличьте масштаб до тех мест, где находится граница, и посмотрите, есть ли граница или нет.

+0

Я проверил дважды. Нет границ.Я расширил размер холста, чтобы увидеть, возможно, «скрытый», но нет - границ в изображениях нет. – Ivelios

+0

Почему вы интегрируете свои img в качестве фона и не просто устанавливаете их с атрибутом src в теге img? –

0

Это, вероятно, потому, что у вас нет атрибута src на тэгах img. Я бы рекомендовал использовать прозрачный пиксель как src в вашем случае.

0
  • Вставить изображение, используя img src с правильной высотой и шириной.
  • Используйте Paint или другие инструменты для редактирования изображения. пример.
  • убедитесь, что ваше исходное изображение не имеет границы, если оно просто выделит и обрезает изображение.
0

Изменить

border : none; 

в

border : none !important; 

Таким образом, она перекрывает все родительские заявления, таким образом, должен работать.

0

Вы пытаетесь установить изображение значка на ссылку, используя фоновое изображение, которое можно перемещать по событию парения.

Простейший способ сделать это следующим образом.

HTML, может быть столь же просто, как:

<a class="test" id="test" href="#"></a> 

и примените следующий CSS:

.test { 
    background: beige url(http://placekitten.com/50/50) center center no-repeat; 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    border: none; 
} 

Применить фоновое изображение по ссылке (a тег) вместо img тега, который не требуется.

См демо по адресу: http://jsfiddle.net/audetwebdesign/qAeHL/

Смежные вопросы