onclick時にスパンタグ内の画像に収まる方法は？

Question

私はスパンタグの中にイメージを持っています。しかし問題は、イメージがスパンタグの内側に収まらないことです。代わりに、画像の一部がスパンタグから外れます。

wordclickにonclickを設定すると画像の色が変わりますが、その画像をonclickするとテキストの色が変わります。私は自分のコードで何か間違っていると思う。

どうすれば実現できますか？

MY HTML：

<div class="games-platform-item pt-item"> 
<ul class="games-sub-menu clearfix"> 
<li class="tab1 current"> 
    <!-- <img src="../images/abc11.jpg"/ class="topimgG1" "> --> 
    <input type="radio" name="imgSwap" id="rdoImg1"> 
    <label class="topimgG1" for="rdoImg1"></label> 
    <span>编辑精选</span> 
</li> 
<li class="tab2"> 
    <div> 
     <!-- <img src="../images/abc2.jpg"/ class="topimgG2" "> --> 
     <input type="radio" name="imgSwap" id="rdoImg2"> 
     <label class="topimgG2" for="rdoImg2"></label> 
     <span>老虎机</span> 
    </div> 
</li> 
<li class="tab3"> 
    <!-- <img src="../images/abc3.jpg"/ class="topimgG3" "> --> 
    <input type="radio" name="imgSwap" id="rdoImg3"> 
    <label class="topimgG3" for="rdoImg3"></label> 
    <span>桌面游戏</span> 
</li> 
<li class="tab4"> 
    <!-- <img src="../images/abc4.jpg"/ class="topimgG4" "> --> 
    <input type="radio" name="imgSwap" id="rdoImg4"> 
    <label class="topimgG4" for="rdoImg4"></label> 
    <span>累计大奖</span> 
</li> 
<li class="tab5"> 
    <!-- <img src="../images/abc5.jpg"/ class="topimgG5" "> --> 
    <input type="radio" name="imgSwap" id="rdoImg5"> 
    <label class="topimgG5" for="rdoImg5"></label> 
    <span>小游戏</span> 
</li> 
<li class="tab6"> 
    <!-- <img src="../images/abc6.jpg"/ class="topimgG6" "> --> 
    <input type="radio" name="imgSwap" id="rdoImg6"> 
    <label class="topimgG6" for="rdoImg6"></label> 
    <span>视频扑克</span> 
</li> 
<li class="tab7"> 
    <!-- <img src="../images/abc7.jpg"/ class="topimgG7" "> --> 
    <input type="radio" name="imgSwap" id="rdoImg7"> 
    <label class="topimgG7" for="rdoImg7"></label> 
    <span>所有游戏</span> 
</li> 

MY CSS：

/*Hide the Radio Button*/ 

.games-sub-menu input[type=radio] { 
    display: none 
} 
/*Set a box for the label, this is what is clicked on*/ 

.games-sub-menu label { 
    display: block; 
    width: 150px; 
    height: 100px; 
} 
/*Set Images...this would work better with sprites*/ 

.games-sub-menu label.topimgG1 { 
    background-image: url("../images/abc1.jpg"); 
    background-repeat: no-repeat; 
    width: 80px; 
    height: 40px; 
    right: 820px; 
    top: 0px; 
    position: absolute; 
    z-index: 999; 
} 
.games-sub-menu input[type=radio]:checked + label.topimgG1 { 
    background-image: url("../images/abc1_onclick.jpg"); 
} 
.games-sub-menu label.topimgG2 { 
    background-image: url("../images/abc2.jpg"); 
    background-repeat: no-repeat; 
    width: 80px; 
    height: 40px; 
    right: 690px; 
    top: 0px; 
    position: absolute; 
    z-index: 999; 
} 
.games-sub-menu input[type=radio]:checked + label.topimgG2 { 
    background-image: url("../images/abc2_onclick.jpg"); 
} 
.games-sub-menu label.topimgG3 { 
    background-image: url("../images/abc3.jpg"); 
    background-repeat: no-repeat; 
    width: 80px; 
    height: 40px; 
    right: 560px; 
    top: 0px; 
    position: absolute; 
    z-index: 999; 
    clear: both; 
} 
.games-sub-menu input[type=radio]:checked + label.topimgG3 { 
    background-image: url("../images/abc3_onclick.jpg"); 
} 
.games-sub-menu label.topimgG4 { 
    background-image: url("../images/abc4.jpg"); 
    background-repeat: no-repeat; 
    width: 80px; 
    height: 40px; 
    right: 430px; 
    top: 0px; 
    position: absolute; 
    z-index: 999; 
} 
.games-sub-menu input[type=radio]:checked + label.topimgG4 { 
    background-image: url("../images/abc4_onclick.jpg"); 
} 
.games-sub-menu label.topimgG5 { 
    background-image: url("../images/abc5.jpg"); 
    background-repeat: no-repeat; 
    width: 80px; 
    height: 40px; 
    right: 305px; 
    top: 0px; 
    position: absolute; 
    z-index: 999; 
} 
.games-sub-menu input[type=radio]:checked + label.topimgG5 { 
    background-image: url("../images/abc5_onclick.jpg"); 
} 
.games-sub-menu label.topimgG6 { 
    background-image: url("../images/abc6.jpg"); 
    background-repeat: no-repeat; 
    width: 80px; 
    height: 40px; 
    right: 18 5px; 
    top: 0px; 
    position: absolute; 
    z-index: 999; 
} 
.games-sub-menu input[type=radio]:checked + label.topimgG6 { 
    background-image: url("../images/abc6_onclick.jpg"); 
} 
.games-sub-menu label.topimgG7 { 
    background-image: url("../images/abc7.jpg"); 
    background-repeat: no-repeat; 
    width: 80px; 
    height: 40px; 
    right: 43px; 
    top: 5px; 
    position: absolute; 
    z-index: 999; 
} 
.games-sub-menu input[type=radio]:checked + label.topimgG7 { 
    background-image: url("../images/abc7_onclick.jpg"); 
} 

Answer 1

私はその画像それにonclickのときのonclickワードスパンで、それは画像の色に しばらくを変更したときに持っていたいです テキストの色が変更されます。正しく質問を解釈する場合

、あなたは{CSSのIMGで、次のように試してみてくださいfor属性は、前<input type="checkbox">要素に

input { 
 
    display: none; 
 
} 
 
label { 
 
    width: 50px; 
 
    height: 30px; 
 
    background: blue; 
 
    display: block; 
 
} 
 
:checked + label + label { 
 
    background: red; 
 
    color: white; 
 
} 
 
:checked + label { 
 
    background: green; 
 
}

<input type="checkbox" id="1"> 
 
<label for="1"></label> 
 
<label for="1">text</label>