Question

每当我为background-image设置<a>时，总是需要在样式表文件中指定宽度和高度。这使得urlimage没有响应，当我尝试解决方案，我在这里找到另一个问题，如 background-size: cover; background-color: transparent;

或使用类行并指定col或使用max-height和max-width图像消失。

这是我目前的代码，根本没有响应：

<div class="container-fluid" style="position:absolute; bottom:50px;">
    <a class="urlImg" href="~/Home/Wall"></a>
</div>

和.css文件

.urlImg {
 background-repeat:no-repeat;
 height:243px; 
 width:1022px;
 display:block; 
 background-image:url(../img/2.2.png);

} 

.urlImg:hover {
     background-image:url(../img/2.1.png);

} 

.urlImg:active {
     background-image:url(../img/2.3.png);

} 

.urlImg:visited {
     background-image:url(../img/2.2.png);

}

如何使这些urlimages响应？

Answer 1

我做了一个小提琴，使其更清晰
https://fiddle.jshell.net/ywzwk1z0/

.container-fluid{
  height:50%;
  width:50%;
}

还添加了background-size:contain;

如何使用css设置元素的响应背景图像？

1 个答案: