gpt4 book ai didi

html - 背景大小 (CSS3) 无法正常工作

转载 作者:太空宇宙 更新时间:2023-11-04 14:55:43 25 4
gpt4 key购买 nike

#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>

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

最佳答案

background size 影响背景的大小(奇怪的是),但不影响实际元素的大小。

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

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

关于html - 背景大小 (CSS3) 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17003971/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com