1

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

问题是什么？

这是一个示例代码：

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

2 回答 2

2

经过一番折腾，我终于弄明白了。这是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-17T19:15:12.757 回答
0

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

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

    .TwitterLink
    {
        padding: 0px 0px 0px 50px;
        margin: 0px 0px 0px 0px;
    }
于 2013-09-17T19:16:28.410 回答