如何將多個背景放到與css衝突的按鈕

我有一個帶有不同背景樣式的3D按鈕。我想爲它設置一個小圖標。但某些方面，它不會顯示等方式的背景顏色改變或消失如何將多個背景放到與css衝突的按鈕

.button { 
 
    text-decoration: none; 
 
    color: white; 
 
    padding: 18px; 
 
    width:170px; 
 
    text-transform: uppercase; 
 
    display: inline-block; 
 
    text-shadow: -2px 2px 0 rgba(0, 0, 0, 0.2); 
 
    font-weight: bold; 
 
    padding-right: 50px; 
 
    margin: 10px; 
 
    margin-top:15px; 
 
    -moz-transition: all 0.1s linear; 
 
    -o-transition: all 0.1s linear; 
 
    -webkit-transition: all 0.1s linear; 
 
    transition: all 0.1s linear; 
 
    -moz-transform: translateZ(0); 
 
    -ms-transform: translateZ(0); 
 
    -webkit-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    /* 
 
    Kinda replicates keyline but looks dumb. 
 
    @include filter(
 
    drop-shadow(0 1px 0 rgba(blue, 0.2)) 
 
    drop-shadow(0 -1px 0 rgba(blue, 0.2)) 
 
); 
 
    */ 
 
} 
 
.button.blue { 
 
    background: -moz-linear-gradient(top, #a2d3e9, #7abedf); 
 
    background: -webkit-linear-gradient(top, #a2d3e9, #7abedf); 
 
    background: linear-gradient(to bottom, #a2d3e9, #7abedf) ; \t 
 
     
 
    box-shadow: -1px 0px 1px #6fadcb, 0px 1px 1px #54809d, -2px 1px 1px #6fadcb, -1px 2px 1px #54809d, -3px 2px 1px #6fadcb, -2px 3px 1px #54809d, -4px 3px 1px #6fadcb, -3px 4px 1px #54809d, -5px 4px 1px #6fadcb, -4px 5px 1px #54809d, -6px 5px 1px #6fadcb, -6px 7px 0 rgba(0, 0, 0, 0.05), -5px 8px 0 rgba(0, 0, 0, 0.05), -3px 9px 0 rgba(0, 0, 0, 0.04), -2px 10px 0 rgba(0, 0, 0, 0.04), -1px 11px 0 rgba(0, 0, 0, 0.03), 0px 12px 0 rgba(0, 0, 0, 0.03), 1px 13px 0 rgba(0, 0, 0, 0.02), 2px 14px 0 rgba(0, 0, 0, 0.02), 3px 15px 0 rgba(0, 0, 0, 0.01), 4px 16px 0 rgba(0, 0, 0, 0.01), 5px 17px 0 rgba(0, 0, 0, 0.01), 6px 18px 0 rgba(0, 0, 0, 0.01), inset 0 4px 5px -2px rgba(255, 255, 255, 0.5), inset 0 1px 0 0 rgba(0, 0, 0, 0.3); 
 
} 
 
.button.yellow { 
 

 
    background: -moz-linear-gradient(top, #f2d851, #ecc92b); 
 
    background: -webkit-linear-gradient(top, #f2d851, #ecc92b); 
 
    background: linear-gradient(to bottom, #f2d851, #ecc92b); 
 
    
 
    color: black; 
 
    text-shadow: -2px 2px 0 rgba(255, 255, 255, 0.3); 
 
    box-shadow: -1px 0px 1px #d9b826, 0px 1px 1px #b1961d, -2px 1px 1px #d9b826, -1px 2px 1px #b1961d, -3px 2px 1px #d9b826, -2px 3px 1px #b1961d, -4px 3px 1px #d9b826, -3px 4px 1px #b1961d, -5px 4px 1px #d9b826, -4px 5px 1px #b1961d, -6px 5px 1px #d9b826, -6px 7px 0 rgba(0, 0, 0, 0.05), -5px 8px 0 rgba(0, 0, 0, 0.05), -3px 9px 0 rgba(0, 0, 0, 0.04), -2px 10px 0 rgba(0, 0, 0, 0.04), -1px 11px 0 rgba(0, 0, 0, 0.03), 0px 12px 0 rgba(0, 0, 0, 0.03), 1px 13px 0 rgba(0, 0, 0, 0.02), 2px 14px 0 rgba(0, 0, 0, 0.02), 3px 15px 0 rgba(0, 0, 0, 0.01), 4px 16px 0 rgba(0, 0, 0, 0.01), 5px 17px 0 rgba(0, 0, 0, 0.01), 6px 18px 0 rgba(0, 0, 0, 0.01), inset 0 4px 5px -2px rgba(255, 255, 255, 0.5), inset 0 1px 0 0 rgba(0, 0, 0, 0.3); 
 
} 
 
.button.yellow:after, .button.yellow:before { 
 
    background: black; 
 
} 
 
.button.yellow:after { 
 
    -webkit-filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.4)); 
 
    filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.4)); 
 
} 
 
.button.yellow:before { 
 
    -webkit-filter: drop-shadow(0 -2px 0 rgba(255, 255, 255, 0.35)); 
 
    filter: drop-shadow(0 -2px 0 rgba(255, 255, 255, 0.35)); 
 
} 
 
.button.yellow .arrow { 
 
    -webkit-filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.4)); 
 
    filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.4)); 
 
} 
 
.button:active { 
 
    box-shadow: none; 
 
    -moz-transform: translate3d(-6px, 6px, 0); 
 
    -ms-transform: translate3d(-6px, 6px, 0); 
 
    -webkit-transform: translate3d(-6px, 6px, 0); 
 
    transform: translate3d(-6px, 6px, 0); 
 
} 
 
.button .arrow { 
 
    -webkit-filter: drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.2)); 
 
    filter: drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.2)); 
 
} 
 
.button:after { 
 
    -webkit-filter: drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.2)); 
 
    filter: drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.2)); 
 
} 
 
.button:after, .button:before { 
 
    position: absolute; 
 
    content: " "; 
 
    right: 15px; 
 
    top: 14px; 
 
    width: 6px; 
 
    height: 18px; 
 
    background: white; 
 
    -moz-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    -webkit-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    display: block; 
 
    z-index: 2; 
 
} 
 
.button:before { 
 
    height: 14px; 
 
    top: 26px; 
 
    right: 16px; 
 
    z-index: 3; 
 
    -moz-transform: rotate(-137deg); 
 
    -ms-transform: rotate(-137deg); 
 
    -webkit-transform: rotate(-137deg); 
 
    transform: rotate(-137deg); 
 
    -webkit-filter: drop-shadow(0 -2px 0 rgba(0, 0, 0, 0.15)); 
 
    filter: drop-shadow(0 -2px 0 rgba(0, 0, 0, 0.15)); 
 
}

<div class="row"> 
 
    <a href="#" class="button blue" onclick="javascript:onKeyPress('B')">CARDLESS<br></a> 
 
    <a href="#" class="button yellow">VIDEO CONFERANCE<br></a> 
 
</div>

當我添加背景：網址（）; 到.button.blue {} 如果我之前的最後一個背景沒有增加任何碰巧如果我添加它後，背景色消失，圖像顯得

來源

2017-08-01 michel

試試這個

background: linear-gradient(rgba(122, 122, 126, 1), rgba(122, 122, 126, 0.65)), url(../images/bg/bg10.jpg) no-repeat top center fixed;

來源

2017-08-01 10:38:27

我加入這到html和它的工作

<div class="" style="height:13%;width:100%;bottom:0;left:0;position:absolute;opacity:1;background-color:Silver;z-index:1000"> 
    <div class="row"> 
    <a href="#" class="button blue" onclick="javascript:onKeyPress('B')"> 
     <img src="images/gesture.png" style="position:absolute;right:50;width:50px;height:50px;top:02;background-color:" alt="">CARDLESS<br> 
    </a> 

    <a href="#" class="button yellow" > 
    <img src="images/call.png" style="position:absolute;right:50;width:50px;height:50px;top:02;background-color:" alt=""> VIDEO CONFERANCE<br> 
    </a> 
</div>

來源

2017-08-01 11:20:58 michel

如何將多個背景放到與css衝突的按鈕

回答

相關問題