在 CSS 背景图像之后放置文本答案

【问题标题】：Position text after CSS background image在 CSS 背景图像之后放置文本
【发布时间】：2013-09-22 08:56:58
【问题描述】：

我正在尝试将文本放置在背景图像之后，但遇到了问题。文字与图像重叠，这不是我想要的。

有什么问题？

这是一个示例代码：

<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>

【问题讨论】：

我会把padding-left: YourBackgroundImageWidth; line-height: YourBAckgroundImageHeight; 给.FBLink 和.TwitterLink divs

标签： css image text positioning

【解决方案1】：

在搞砸之后，我终于弄明白了。这是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;
        }

【讨论】：

【解决方案2】：

为您的元素添加一些填充，以便将它们从边缘引入并阻止它们与您的图像重叠

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

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

【讨论】：

问题还在于图像不断被截断，无法很好地并排显示图像和文本。图像现在或多或少很好。