Html 更改链接到收音机的选定CSS选项卡的背景图像

我正在尝试使用CSS-tricks.com中的CSS标签技术，并根据自己的需要进行调整。

我想让每个选项卡显示它自己的背景图像，以及在选择特定选项卡时该选项卡特有的不同背景图像

HTML:

---

我遇到的另一个问题是，即使我指定了标签的尺寸，标签也无法显示背景图像，尽管这可能是我稍后会意识到的一些显而易见的事情。

我认为您对“标签”的实际形式存在误解

它不是

标签

…它是一个类为

.productTab

的div

我已经清除了一些额外的CSS，并更改了一些颜色，以便您可以看到正在发生的事情

CSS

.tabs {
    position: relative;
    min-height:200px;
    clear: both;
}

.productTab {
    float: left;
    width: 132px;
    height: 164px;
    //background-color: red;
    border-radius:5px;
    padding:5px;
}

.productTab [type=radio] {
    display: none;   
}

.productTab label{
    /*background: #eee;*/
    //border: 1px solid #ccc; 
    position: relative;
    left: 1px; 
    margin-left: -1px;

}

.productTabContent {
    background: #229FE8;
    //border: 1px solid #ccc;
    position: absolute;
    top: 28px;
    right: 0;
    bottom: 0;
    left: 0;
}

/*Changes the style of the selected Label and brings it to the front*/
[type=radio]:checked ~ label {
  //background: white;
  //border-bottom: 1px solid white;
  z-index: 2;
}

/*Brings the content adjacent to the label to the front*/
[type=radio]:checked ~ label ~ .productTabContent {
  z-index: 1;
}

.productTabLabel1 {
    //background-image: url('../img/products1.jpg');
    background-color: #bada55;
}

.productTabLabel2 {
    //background-image: url('../img/products2.jpg');
    background-color: #663399;
}

---

在这种情况下，我确实认为一个带有实际链接图像的JSfiddle.net示例会有所帮助。谢谢！解决了这个问题，回答了我的问题，摆脱了productTabContent的背景使它变得非常清晰。

.tabs {
    position: relative;
    min-height:200px;
    clear: both;
}

.productTab {
    float: left;
    width: 132px;
    height: 164px;
}

.productTab [type=radio] {
    display: none;   
}

.productTab label{
    /*background: #eee;*/
    border: 1px solid #ccc; 
    position: relative;
    left: 1px; 
    margin-left: -1px; 

}

.productTabContent {
    background: #229FE8;
    border: 1px solid #ccc;
    position: absolute;
    top: 28px;
    right: 0;
    bottom: 0;
    left: 0;
}

/*Changes the style of the selected Label and brings it to the front*/
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}

/*Brings the content adjacent to the label to the front*/
[type=radio]:checked ~ label ~ .productTabContent {
  z-index: 1;
}

#productTabLabel1 {
    background-image: url('../img/products1.jpg');
}

#productTabLabel2 {
    background-image: url('../img/products2.jpg');
}

.tabs {
    position: relative;
    min-height:200px;
    clear: both;
}

.productTab {
    float: left;
    width: 132px;
    height: 164px;
    //background-color: red;
    border-radius:5px;
    padding:5px;
}

.productTab [type=radio] {
    display: none;   
}

.productTab label{
    /*background: #eee;*/
    //border: 1px solid #ccc; 
    position: relative;
    left: 1px; 
    margin-left: -1px;

}

.productTabContent {
    background: #229FE8;
    //border: 1px solid #ccc;
    position: absolute;
    top: 28px;
    right: 0;
    bottom: 0;
    left: 0;
}

/*Changes the style of the selected Label and brings it to the front*/
[type=radio]:checked ~ label {
  //background: white;
  //border-bottom: 1px solid white;
  z-index: 2;
}

/*Brings the content adjacent to the label to the front*/
[type=radio]:checked ~ label ~ .productTabContent {
  z-index: 1;
}

.productTabLabel1 {
    //background-image: url('../img/products1.jpg');
    background-color: #bada55;
}

.productTabLabel2 {
    //background-image: url('../img/products2.jpg');
    background-color: #663399;
}