Question

#main{
position: relative;
height: 60px;   
}

#exit{
float: left;
background: url(exit.jpeg) no-repeat;
width: 230px;
height: 230px;
background-size: 60px 60px;
opacity: .5;
}


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="wrap">

        <!-- TOP -->
        <header id="main">
            <a href="#" id="exit"></a>
            <h1>Temp</h1> 
        </header>

        <!-- MENU -->
        <nav id="menu">
            <ul>
                <li><a href="#">temp 2</a></li>
                <li><a href="#">temp 3</a></li>
                <li><a href="#">temp 4</a></li>
                <li><a href="#">temp 5</a></li>
            </ul>
        </nav>


    </div>
</body>
</html>

这可行，但不是它应该的方式。图片被调整大小，但是当我将鼠标悬停在它上面时，我还可以将鼠标移动到图片大小调整之前的位置，并且仍然会调用悬停功能。

Answer 1

background size会影响背景的大小（奇怪的是），但不会影响实际元素的大小。

如果元素上有悬停功能，则无论您如何显示背景图像，该悬停功能仍将应用于整个元素。

如果您希望悬停效果仅应用于背景图像覆盖的区域，则需要将整个元素的大小调整为该大小，而不仅仅是背景图像。

background-size（CSS3）无法正常工作

1 个答案: