Question

我正在尝试让我的div更改rollover的背景，但我想避免使用JavaScript。

这是我的代码：

<style type="text/css">

 .rollover a {     
        display : block;
        width : 200px;
        height : 200px;             
        background-image : url( image1 ); 
    }

    .rollover a:hover { 
        display : block;
        width : 200px;
        height : 200px;
        background-image : url( image2 ); 
    }

</style>

<div class="rollover"> 
    <a href="/site">sitelink</a> 
</div>

它工作正常，但图像被裁剪。

我需要显示尺寸为200px，200px的完整图像。

Answer 1

使用background-size并且总是一个好主意也使用background-repeat

background-size: 100% 100%;
background-repeat: no-repeat;

Answer 2

这个例子对我来说很好，但问题是当我想使用另一个翻转图像时。问题在于定位第二翻转图像。我尝试更改显示：阻止;到内联阻止，但它没有帮助。

 .rollover1 a {     
            display : block;
            width : 200px;
            height : 200px;             
            background-image : url( image1 ); 
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-left: 150px;           
            margin-top: 100px; 
        }
     .rollover1 a:hover { 
        display : block;
        width : 200px;
        height : 200px;
        background-image : url( image2 ); 
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-left: 150px;          
        margin-top: 100px; 
    }

编辑：我明白了。我忘了定义position:absolute;

使用CSS更改翻转时的背景图像

2 个答案: