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圖像鏈接

回答

相關問題