我怎么有图像调整和保留的能力，让他们改变悬停

问题描述：

.custom-forums { 
    height: auto; 
    width: 100%; 
    border-image-source:transparent url("../images/forums.png") center top no- 
    repeat; 
}

与

.custom-forums:hover { 
    background-image: url('../images/forums-hover.png'); 
}

的问题是这个：当width设置为100%它根本不显示图像。但是，当width和height设置为170px它确实有效。我希望根据屏幕分辨率调整按钮大小，并保留悬停图像更改的能力。

许多感激， MAS21

你有更多的代码可以显示吗？有很多原因可能导致无法正常工作。更好的是，如果你能创建一个可以复制你问题的jsfiddle。 –

我们需要看到你的HTML，但是在第一种情况下你的元素的高度是0还是可以的？ – tocqueville

元素的高度不为零。 @tocqueville –

答

背景图像，以便工作需要的预定高度或在其容器中的一定高度的内容。

我有一个想法，你可以做到这一点的另一种方式：

使用背景图片
换个图像中的div和悬停设置不透明度为0，或您的喜好和背景图片示出

运行这个例子：

.container { 
 
background: url('http://placehold.it/199x199') no-repeat center center; 
 
width: 200px; 
 
} 
 

 
img { 
 
transition: opacity ease-in-out .5s; 
 
} 
 

 
img:hover { 
 
opacity: .25; 
 
}

<div class="container"> 
 
<img src="http://placehold.it/200x200"> 
 
</div>

这可能有用，谢谢。 –

嗨@MasonHerbel试试看，让我知道。 –

我怎么有图像调整和保留的能力，让他们改变悬停

相关推荐