Текст позиции после фонового изображения CSS

Я пытаюсь разместить текст после фонового изображения, и у меня возникают проблемы. Текст перекрывает изображение, чего я не хочу.Текст позиции после фонового изображения CSS

В чем проблема?

Вот пример кода:

<html> 
<head> 
    <title>Test CSS</title> 
    <style type="text/css"> 
     #uxFaceBookLink 
     { 
      background-image: url(icon-social-facebook.png); 
      background-repeat: no-repeat; 
      background-position-x: left; 
      background-position-y: 0px; 
     } 
     .FBLink 
     { 
      padding: 0px 0px 0px 0px; 
      margin: 0px 0px 0px 0px; 
     } 
     #uxTwitterLink 
     { 
      background-image: url(icon-social-twitter.png); 
      background-repeat: no-repeat; 
      background-position-x: 0px; 
      background-position-y: 0px; 
     } 
     .TwitterLink 
     { 
      padding: 0px 0px 0px 0px; 
      margin: 0px 0px 0px 0px; 
     } 
    </style> 
</head> 
<body> 
    <div> 
     <p><a ID="uxFaceBookLink" href="http://www.facebook.com" target="_blank" class="FBLink">Join us on Facebook</a></p> 
     <p><a ID="uxTwitterLink" href="http://twitter.com" target="_blank" class="TwitterLink">Follow us on Twitter</a></p> 
    </div> 
</body> 
</html>

источник

2013-09-17 Sarah Weinberger

Я дал бы 'обивку налево: YourBackgroundImageWidth; line-height: YourBAckgroundImageHeight; '' .FBLink' и '.TwitterLink' divs – Morpheus

После возиться с ним, я, наконец, понял это. Вот CSS

 #uxFaceBookLink 
     { 
      background-image: url(icon-social-facebook.png); 
      background-repeat: no-repeat; 
      background-position-x: left; 
      background-position-y: 0px; 
     } 
     .FBLink 
     { 
      padding: 0px 0px 0px 20px; 
      margin: 0px 0px 0px 0px; 
     } 
     #uxTwitterLink 
     { 
      background-image: url(icon-social-twitter.png); 
      background-repeat: no-repeat; 
      background-position-x: 0px; 
      background-position-y: 0px; 
     } 
     .TwitterLink 
     { 
      padding: 0px 0px 0px 20px; 
      margin: 0px 0px 0px 0px; 
     }

источник

2013-09-17 19:15:12

Добавьте отступы для ваших элементов для того, чтобы привести их от края и остановить их перекрывание ваших изображений

.FBLink 
    { 
     padding: 0px 0px 0px 50px; 
     margin: 0px 0px 0px 0px; 
    } 

    .TwitterLink 
    { 
     padding: 0px 0px 0px 50px; 
     margin: 0px 0px 0px 0px; 
    }

источник

2013-09-17 19:16:28 Vector

Проблема также заключалась в том, что изображение продолжало обрезаться и просто не могло получить изображение и текст красиво рядом. Теперь изображение более или менее точное. –

Текст позиции после фонового изображения CSS

ответ

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