Question

所以我一直在使用可点击图片的网站上工作，但我似乎无法让...:hover正确。我希望图片被白色覆盖，0.1不透明度。

<html>
<head>
    <style>
        body {padding: 0; margin: 0;}
        img {
            margin-top: -10px;
            width: 100%;
            height: auto;
        }
        a:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        #asca:hover {background-color: rgba(255, 255, 255, 0.1);}
        #fhca:hover {background-color: rgba(255, 255, 255, 0.1);}
        #asca img:hover {background-color: rgba(255, 255, 255, 0.1);}
        #fhca img:hover {background-color: rgba(255, 255, 255, 0.1);}
    </style>
</head>
<body>
    <a id="asca" href="asc.php">
        <img src="Pictures/chevcorvette4kp.png" width="4096" height="900"  alt="ascpic">
    </a>
    <a id="fhca" href="fhc.php">
        <img src="Pictures/fhyper.png" width="4096" height="900"  alt="fhcpic"> 
    </a>
</body>
</html>

正如你所看到的那样，我真的试图在悬停时将所有颜色都改为那种颜色，但它似乎无法发挥作用。

Answer 1

CSS 的问题是在悬停时设置的背景颜色在前景图像后面，因为前景图像会阻挡，所以它永远不可见。

保留当前的HTML，如果您将CSS更新为此类内容，则可以达到您想要的效果。（CSS的显着位置评论）

<style> body {padding: 0; margin: 0;} img { margin-top: -10px; width: 100%; height: auto; } a { background-color: #fff; /* Give the <a> tag a white background */ } a:hover img { opacity: .9; /* reduce the transparency of the foreground image by 10%, allowing the white background to show through 10%. */ } </style>

Answer 2

它不起作用，因为图像覆盖了自己的background-color。有几种方法可以达到你想要的效果，但最简单和最直接的方法是在锚标签上使用background-color，并在悬停时更改图像的不透明度。

<html>
<head>
    <style>
        body {padding: 0; margin: 0;}
        img {
            margin-top: -10px;
            width: 100%;
            height: auto;
        }

        #asca,
        #fhca {
            background-color: rgb(255,255,255);
        }

        #asca:hover img,
        #fhca:hover img {
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <a id="asca" href="asc.php">
        <img src="Pictures/chevcorvette4kp.png" width="4096" height="900"  alt="ascpic">
    </a>
    <a id="fhca" href="fhc.php">
        <img src="Pictures/fhyper.png" width="4096" height="900"  alt="fhcpic"> 
    </a>
</body>
</html>

Answer 3

尝试使用不透明度，背景不会生效..

 body {padding: 0; margin: 0;}
        img {
            margin-top: -10px;
            width: 100%;
            height: auto;
        }
        a:hover img{
            opacity:0.2;
        }
        #asca:hover {background-color: rgba(255, 255, 255, 0.1);}
        #fhca:hover {background-color: rgba(255, 255, 255, 0.1);}
        #asca img:hover {background-color: rgba(255, 255, 255, 0.1);}
        #fhca img:hover {background-color: rgba(255, 255, 255, 0.1);}

<a id="asca" href="asc.php">
        <img src="http://via.placeholder.com/350x150"   alt="ascpic">
    </a>
    <a id="fhca" href="fhc.php">
        <img src="http://via.placeholder.com/350x150"   alt="fhcpic"> 
    </a>

Answer 4

我现在无法测试，但您可以尝试使用z-index属性。

img {
    margin-top: -10px;
    width: 100%;
    height: auto;
    z-index: 0;
}
a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 10;
}

Answer 5

试试这个：

a {
    position:relative;
    overflow:hidden;
}
a:before{
    content: "";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:rgba(255, 255, 255, 0.78);
    opacity: 0;
    transition:all ease .3s;
}
a:hover:before {
    opacity:1;
}

CSS：悬停时更改颜色

5 个答案: