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 - 图片不显示

回答

相关问题