wordpress css图像链接

你好 - 我尝试（并失败悲惨），使这些社会化媒体图标在我的WordPress的博客（www.doublecrossxx.com）的导航的右上角点击。我设法添加代码以使它们正确放置，但我无法弄清楚如何在图像周围创建可点击区域。wordpress css图像链接

#access { 

background: black; 
background-image: url("http://doublecrossxx.com/images/sm_dcxx.jpg"); 
background-repeat: no-repeat; 
background-attachment: scroll; 
background-position: 599pt 2pt; 
height: 27px; 
width: 23px; 
display: inline-block; 

    float: left; 

    margin: 0; 

    width: 845px; 
}

来源

2012-05-02 Ed McKirdy

我怀疑你想要的'margin'属性，以增加点击区域。我不确定这是否会与'精灵'方法一起工作 - 但试试吧！ '：'' – halfer

使用链接而不是设置整个div的背景图像。 – Jrod

谢谢哈尔弗和Jrod。 Jrod，请您详细说明您的“使用链接”是什么意思？我很抱歉，但我对定制Wordpress主题有点新。谢谢！ –

您没有任何实际联系（<a>的）;供人点击。您只需将背景图像应用于#access div。

所以，你将不得不以某种方式添加链接到你的#access div。我看不到你的主题文件，但如果我不得不猜想，请看一个名为的文件header.php。这通常是用来构建wordpress页面的顶部部分。

你应该能够很快找到#access DIV，并且可以添加链接，就像这样：

<div id="access"> 
    <!-- some php stuff for your menu --> 
    <a id="fb_link" href="(link to facebook)"></a> 
    <a id="twitter_link" href="(link to twitter)"></a> 
</div>

然后，在你的CSS（大概style.css文件），使用该图像作为背景以这两个链接，而不是#access：

#fb_link, #twitter_link { 
    background: url("images/sm_dcxx.jpg") no-repeat top left; 
    width: 25px; 
    height: 25px; 
} 
#twitter_link { 
    background-position: top -25px; 
}

（你将不得不调整25px的量，这只是我的猜测而已）

这种技术的缺点是，你将个人有T如果您需要更改链接，请手动修改header.php。没什么大不了的，但你应该意识到这一点。

另外，我注意到，你的形象网址是这样的：

http://doublecrossxx.com/images/sm_dcxx.jpg

，告诉我，你在你的wordpress的顶层创建的文件夹安装一个名为/图片/。你不应该那样做。您添加到WP安装的任何和所有文件至少应放在/ wp-content /中。作为演示文稿一部分的图像（如此处所述的图像）应该肯定位于您的主题文件夹中。在我上面的CSS中，我使用了一个相对链接指向位于CSS文件旁边的图像文件夹。

来源

2012-05-02 18:03:01 chipcullen

非常感谢你chipcullen！我正试图让它现在工作。我非常感谢你的协助！ –

我创建了一个js小提琴，它可以让你的链接点击，让我知道你是否有任何问题。

http://jsfiddle.net/trickeedickee/PYTnm/

来源

2012-05-02 18:10:35 frontendzzzguy

非常感谢trickeedickee！我会试试看。我非常感谢你这样做！ –

完全没问题，让我知道它是否适合你。 – frontendzzzguy

wordpress css图像链接

回答

相关问题