Wordpress/CSS - 图片不显示

Posted 2023-03-06

【中文标题】Wordpress/CSS - 图片不显示

【英文标题】：Wordpress/CSS - picture doesn't show up

【发布时间】：2017-07-01 14:34:29

【问题描述】：

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

我已经完全按照本教程所说的做了（基本上它或多或少只是复制和粘贴），但我的图像不会显示，我完全不知道为什么。更奇怪的是，当我在样式表中使用确定的图像大小（例如：“宽度：300 像素；高度：250 像素；”）时，图像确实会显示出来。但是当我使用“background-size：cover;”，“background-size：contain;”，“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;

有人知道我做错了什么吗？

【问题讨论】：

那些图片 url 看起来不正确，你这样做是为了删除网站名称还是真的像那样链接？

【参考方案1】：

我猜你可以做的是将两个图像放在你的 html 中，并在主图像悬停后使用 :hover 显示不同的图像：

HTML

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

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

 <img class="image_off" src="yourSeconfImage" >


 </a>

CSS

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

【参考方案2】：

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

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

P.S.：您可以使用宽度/高度设置和 background-size: cover - 完美运行...