Question

我想指出的第一件事是我对CSS几乎一无所知。目前我正在尝试使用Wordpress创建一个网站，我希望添加一个像链接一样的图像，当鼠标悬停在其上时，该图像会更改为另一个图像。我找到了以下教程：https://www.organicweb.com.au/17523/wordpress/image-link-css/

我已经完成了本教程所说的内容（基本上它或多或少只是复制和粘贴），但我的图像不会出现，我完全不知道为什么。更奇怪的是，当我在样式表中使用明确的图像大小时，图像会出现（例如：＆＃34; width：300px; heigth：250px;＆＃34;）。但是当我使用＆＃34; background-size：cover;＆＃34;，＆＃34; background-size：contains;＆＃34;，＆＃34; background-size：auto时，它不起作用;＆＃34;或任何其他可能性。

这有效：

.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;

我不知所措！ :(有没有人知道我可能做错了什么？

Answer 1

我猜你能做的就是在你的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
 }

Answer 2

.ge-link不是图片代码，它只是一个拥有背景图片的容器。在第二种情况下，您没有为该容器定义高度（也没有宽度，但这不是导致问题的主要原因），因此容器高度为0像素 - 没有高度！它实际上包含背景图像，但是如果高度为0则它不会显示任何内容。

只要您将图像用作背景图像，只需使用这些宽度，尤其是高度设置即可。或者使用真实的图像元素（<img>）。

P.S。：你可以使用宽度/高度设置和 background-size: cover - 完美地运作......

Wordpress / CSS - 图片无法显示

2 个答案: