用里面的按钮改变div的背景颜色

Question

我正在尝试在有焦点时更改按钮的背景颜色。背景颜色正确但聚焦时图像消失。我正在寻找使用纯CSS的解决方案。

这是我的代码

＆＃13;

＆＃13;

    #templatebtn {
        background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo1vDaH0IexRj_MOvI7AMzSGt79t_4vvVNccccLZz9FkP2n4wU);
        height: 94px;
        width: 140px;
        position: absolute;
        background-repeat: no-repeat;
        border: none;
        background-position: 50px;
    }

    #tcolor {
        background-color: #d0cece;height: 93px;
        width: 140px;
    }

    #templatebtn:hover, #templatebtn:focus {
        background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo1vDaH0IexRj_MOvI7AMzSGt79t_4vvVNccccLZz9FkP2n4wU);
        height: 94px;
        width: 140px;
        position: absolute;
        background-repeat: no-repeat;   
        background: -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%); height: 94px;
}

＆＃13;

 <div id="tcolor"><button id="templatebtn"></button></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我相信这就是你要找的东西。

#templatebtn {
    position: absolute;
    border: none;
    background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo1vDaH0IexRj_MOvI7AMzSGt79t_4vvVNccccLZz9FkP2n4wU);
    background-repeat: no-repeat;
    background-position: center;
    width: 140px;
    height: 94px;
}

#tcolor{
    background-color: #d0cece;
}

#templatebtn:hover,
#templatebtn:focus {
    background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo1vDaH0IexRj_MOvI7AMzSGt79t_4vvVNccccLZz9FkP2n4wU), -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%);
}

<div id="tcolor"><button id="templatebtn"></button></div>

Answer 2

templatebtn {

    background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo1vDaH0IexRj_MOvI7AMzSGt79t_4vvVNccccLZz9FkP2n4wU);
    height: 94px;
    width: 140px;
    position: relative;
    background-repeat: no-repeat;
    border: none;
    background-position: 50px;
}

#tcolor {
    background-color: #d0cece;height: 93px;
    width: 140px;
}

#templatebtn:hover, #templatebtn:focus {
    background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo1vDaH0IexRj_MOvI7AMzSGt79t_4vvVNccccLZz9FkP2n4wU);
    height: 94px;
    width: 140px;
    position: absolute;
    background-repeat: no-repeat;   
    background: -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%); height: 94px;

}