Question

我有一个DIV，我想改变背景颜色的不透明度，具体取决于鼠标是否在它上面。

我知道您可以使用background: rgba(54, 25, 25, .5)等，但我想分别设置颜色。有什么方法我只能修改OPACITY，而不是颜色。

我可以opacity: 0.3等，但这会影响整个DIV，我只想影响背景颜色。

感谢您的帮助。

Answer 1

没有html / css没有内置的选项，但是由于您在javascript中访问/设置颜色，您可以添加自己的功能，可以为您处理。

以下是您的示例：

<script type="text/javascript">
function RGBA(red,green,blue,alpha) {
    this.red = red;
    this.green = green;
    this.blue = blue;
    this.alpha = alpha;
    this.getCSS = function() {
        return "rgba("+this.red+","+this.green+","+this.blue+","+this.alpha+")";
    }
}

// store a copy of the color
var bgColor = new RGBA(255,0,0,0.5);

function setBgOpacity(elem, opac) {
    bgColor.alpha = opac;
    elem.style.backgroundColor = bgColor.getCSS();
}
</script>

然后在HTML中使用onmouseover事件来更改bgColor的不透明度：

<div onmouseover="setBgOpacity(this, '0.3');"
     onmousout="setBgOpacity(this, '0.5');">Put your mouse over me</div>

Answer 2

您可以将背景部分设为不同的div，并将不透明度设置为div，即

<div id="container">
    <div id="background"></div>
    <div id="content">
        <p>Lorum ipsum...</p>
    </div>
</div>

和

#background { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:#FF0000;
}
#background:hover { opacity:0.3; }
#content { position:relative; z-index:10; }

Answer 3

RGBa中的Alpha值与不透明度之间存在差异。不透明度会影响所有子元素，Alpha不会。

您必须读取当前颜色值，然后将其重新设置为具有新Alpha值的RGBa。您可能需要将当前的十六进制颜色值转换为十进制三元组才能执行此操作。

Answer 4

如果您依靠RGBA来修改背景颜色的不透明度，不能，则无法单独设置颜色本身。您必须为正常状态和悬停状态声明显式RGBA值。

Answer 5

不，你不能只编辑rgba的alpha。因此，您应该使用RGB的{{1}}部分。

Answer 6

如果您想从容器中获得单独的背景颜色，则可以使用:before或:after。

.container { 
    position: relative;

    &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 1;
        z-index: -1;
    }

    &:hover {
        &:before {
            opacity: 0.5;
        }
    }

    .content {
        z-index: 1;
    }
}

当您将鼠标悬停在.container上时，只会影响:before的不透明度，而不会影响内容。

CSS：在鼠标悬停时更改背景颜色不透明度

6 个答案: