Wordpress/CSS - 圖片不顯示

我想指出的第一件事是我幾乎對CSS一無所知。目前，我正在嘗試使用Wordpress創建網站，並且我想添加一個圖像，這個圖像就像一個鏈接，當鼠標懸停在另一個圖像上時，圖像會變爲另一個圖像。我發現這個下面的教程：https://www.organicweb.com.au/17523/wordpress/image-link-css/Wordpress/CSS - 圖片不顯示

我正是這樣做教程說什麼（基本上它或多或少只是複製粘貼&），但我的形象將不會顯示了，我完全不知道爲什麼。更奇怪的是，當我在樣式表中使用確定的圖像大小（例如：「width：300px; heigth：250px;」）時，圖像確實會顯示。但是當我使用「background-size：cover;」，「background-size：contains;」，「background-size：auto;」時它不起作用或任何其他可能性。

這工作：

.ge-link { 
background-image: url(http://.../wp-content/uploads/2017/02/325484_1280.jpg); 
background-repeat: no-repeat; 
background-position: center; 
width: 300px; 
hight: 250px; 
display: block;

這不起作用：

.ge-link { 
background-image: url(http://.../uploads/2017/02/325484_1280.jpg); 
background-repeat: no-repeat; 
background-position: center; 
background-size: cover; 
display: block;

我不知所措！ :(有沒有人有一個想法，我可能會做錯什麼？

來源

2017-02-13 Christian

這些圖像的URL看起來不正確，你剛剛做刪除的網站名稱或你真的這樣的鏈接？ –

我想你可以做的是將兩個圖像放在一起在你的html和使用：懸停以顯示主圖像後，一個不同的圖像：

HTML

<a id="linkId" href="www.yourlink"> 

<img class="image_on" src="yourFirstImage.png" alt="picture"> 

<img class="image_off" src="yourSeconfImage" alt="picture 2"> 


</a>

CSS

.image_off, .link-block:hover .image_on{ 
    display:none 
} 
.image_on, .link-block:hover .image_off{ 
    display:block 
}

來源

2017-02-13 15:16:32 randseed1724

.ge-link不是圖像標籤，它只是有一個背景圖像的容器。在第二種情況下，你沒有爲該容器定義高度（也沒有寬度，但這不是問題的主要原因），因此容器高度爲0像素 - 沒有高度！它實際上包含背景圖像，但是0高度它不顯示任何東西。

所以只要使用這些寬度，特別是高度設置，只要你使用圖像作爲背景圖像。或者使用真實圖像元素（<img>）。

PS：您可以使用寬度/高度設置和background-size: cover - 完美的作品...

來源

2017-02-13 15:37:09 Johannes

Wordpress/CSS - 圖片不顯示

回答

相關問題