Question

目前我遇到了这个问题。

我正在为div添加一个img作为背景图片：“first-portfolio-item”。

现在，当我将鼠标悬停在图像上时，它会改变它的不透明度，但我想要的是颜色的不透明度会发生变化，并且会出现在图像的顶部。

<div class="span4 first-portfolio-item">
    <a href="#" class="hidetext" alt="header">Header</a>
</div>

.first-portfolio-item{

    width: 300px;
    height: 600px;
    cursor: pointer;

    background-image: url('../img/header-image.jpg');

        &:hover{

            background-color: #3FF;
            opacity: 0.5;
            filter:alpha(opacity=50); 
        }
    }

}

Answer 1

通过使用CSS背景图像，您可以更改背景（图像）的不透明度，以改变颜色背景的不透明度。尝试使用<image> - 代码，并使用包含div的&:hover。

Answer 2

您无法在背景图像上显示背景颜色。但是你可以添加第二个背景图像或使用盒子阴影来获得漂亮的流动效果。据我所知，你不需要过滤器：...属性animore。

尝试用这个替换你的CSS：

&:hover
{
    Box-shadow: inset 0px 0px 10px rgb(63, 243, 255,0.5);
}

如果你想用这种颜色填充你的链接，只需使阴影更大。

 &:hover
    {
        Box-shadow: inset 0px 0px 50px rgb(63, 243, 255,0.5);
    }

Answer 3

提供绝对位置和相对位置，查看并给出以下css属性尝试将鼠标悬停在其上..

.first-portfolio-item{
     width: 100%;
     height: 100%;
    cursor: pointer;
   position:absolute;
   background-color:red;
}

a:hover{
        background-color:white; 
        opacity: 0.99;
        filter:alpha(opacity=50); 
        position:relative;
    }

在悬停时给div一个彩色背景+给彩色背景一个不透明度

3 个答案: