5

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

我知道你可以使用background: rgba(54, 25, 25, .5)etc，但我想单独设置颜色。有什么办法可以只修改不透明度，而不是颜色。

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

4

6 回答 6

4

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

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

和

#container { overflow:hidden; position:relative; }
#background { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:#FF0000;
}
#background:hover { opacity:0.3; }
#content { position:relative; z-index:10; }
于 2012-04-30T18:16:24.787 回答
4

没有 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>
于 2012-04-30T18:25:46.680 回答
2

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

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

于 2012-04-30T18:12:04.387 回答
1

如果您依靠 RGBA 来修改背景颜色的不透明度，不，没有办法将其与颜色本身分开设置。您必须为正常和悬停状态声明显式 RGBA 值。

于 2012-04-30T18:12:06.823 回答
1

不，您不能只编辑 rgba 的 alpha。所以你应该使用RGB.RGBa

于 2012-04-30T18:12:42.897 回答
1

如果您想要与容器分开的背景颜色，您可能需要使用: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而不影响内容。

于 2017-06-22T14:25:08.053 回答