Question

我花了大约一个星期寻找答案并尝试各种不同的设置不透明度的方法，并强制重绘各种元素以更新全部数量。

这完全在firefox http://i.imgur.com/l90zjoi.png

中呈现

var hex = document.getElementsByClassName('hex')[0];
hex.classList.add("highlight");

.hex {
    float: left;
    margin-right: -29px;
    margin-bottom: -52px;
    height: 104px;
    width: 120px;
}

.highlight {
    opacity:0.50;
    filter: alpha(opacity=50);
}

.desert {
    background: url("http://i.imgur.com/zAr9w6T.png");
}

.periplaneta{
    fill : #FF9933;
    stroke : black;
}


a {
    color: inherit;
}

.menu {
    background: #8bc34a;
    color: white;
    text-align: center;
}

.menu-item, .menu-open-button {
    background: #e91e63;
    border-radius: 100%;
    width: 25px;
    height: 25px;
    margin-left: -40px;
    position: absolute;
    color: white;
    text-align: center;
    line-height: 25px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform ease-out 200ms;
    transition: transform ease-out 200ms;
}

.menu-open {
    display: none;
}

.menu-item:hover {
    background: white;
    color: #e91e63;
}

.menu-open-button {
    z-index: 2;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
    transform: scale(1.1, 1.1) translate3d(0, 0, 0);
    cursor: pointer;
}

.menu-open-button:hover {
    -webkit-transform: scale(1.7, 1.7) translate3d(0, 0, 0);
    transform: scale(1.7, 1.7) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
    -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
    transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.menu-open:checked ~ .menu-item {
    -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
    transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

.menu-open:checked ~ .menu-item:nth-child(3) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
    -webkit-transform: translate3d(-40px, -25px, 0);
    transform: translate3d(-40px, -25px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(4) {
    -webkit-transition-duration: 280ms;
    transition-duration: 280ms;
    -webkit-transform: translate3d(40px, -25px, 0);
    transform: translate3d(40px, -25px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(5) {
    -webkit-transition-duration: 380ms;
    transition-duration: 380ms;
    -webkit-transform: translate3d(40px, 25px, 0);
    transform: translate3d(40px, 25px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(6) {
    -webkit-transition-duration: 480ms;
    transition-duration: 480ms;
    -webkit-transform: translate3d(-40px, 25px, 0);
    transform: translate3d(-40px, 25px, 0);
}

.rotate{
    -webkit-transition: all 0.2s linear;
    transition: all 0.5s linear;
}

.rotate.down{
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

<div class="hex desert"><nav class="menu"><input type="checkbox" href="#" class="menu-open" name="menu-open53" id="menu-open53" disabled=""><label class="menu-open-button" for="menu-open53" style="background: orange;"><i class="fa rotate action-display fa-arrow-right"></i></label><a href="#" class="menu-item" onclick="lockInAction(this,'fa-arrow-right')" style="background: orange;"> <i class="fa fa-arrow-right move-action"></i> </a><a href="#" class="menu-item" onclick="lockInAction(this,'fa-shield')"> <i class="fa fa-shield defence-action"></i> </a><a href="#" class="menu-item" onclick="lockInAction(this,'fa-bug')"> <i class="fa fa-bug recruit-action"></i> </a><a href="#" class="menu-item" onclick="lockInAction(this,'fa-cog')"> <i class="fa fa-cog harvest-action"></i> </a></nav><svg height="100" width="100"><g><circle cx="30" cy="60" r="15" id="inf" class="periplaneta"></circle><text x="25" y="65" font-family="Verdana" font-size="20" fill="black">1</text></g><g><polygon points="60,5 40,40 80,40" class="periplaneta"></polygon><text x="55" y="35" font-family="Verdana" font-size="20" fill="black">2</text></g><g><rect x="50" y="50" width="40" height="40" class="periplaneta"></rect><text x="60" y="75" font-family="Verdana" font-size="20" fill="black">1</text> </g></svg></div>

造成这种情况的原因是什么？页面上有432个十六进制。但我只想突出其中最多6个。任何想法/见解都会非常感激。

Answer 1

因此，经过一周的调查后，这看起来是Chrome的一个错误。

代替更改不透明度我选择使用webfilter突出显示hexes作为chrome中的错误的解决方法。

-webkit-filter: brightness(110%);
-webkit-filter: sepia(70%);
-webkit-filter: hue-rotate(-15deg);

我希望这可以帮助任何遇到同样问题的人

chrome set opacity未按预期一致呈现

1 个答案: