Question

我正在尝试在背景图片后定位文字并遇到麻烦。文本与图像重叠，这不是我想要的。

有什么问题？

以下是示例代码：

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

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

Answer 2

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

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

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

在CSS背景图像之后定位文本

2 个答案: