gpt4 book ai didi

html - 使用
  • 的简单选项卡实现,但如何设置选项卡背景图像?

转载 作者:行者123 更新时间:2023-11-28 13:40:24 24 4
gpt4 key购买 nike

我使用 <ul><li><a> 实现了一个简单的标签导航 ,问题是每个选项卡上仍然需要几个“”。我的意思是,在我目前的实现中,我有:

  • -tab 文本即 <a>text</a>

  • -在每个选项卡上我都有一个选项卡图标图像,我将其放在 <li> 上作为 <li> 的背景图片,

但我还需要:

  • -tab 分隔符图像(竖条图像),我打算放在 <a> 上, 并将其放在左侧 background-position: left ,它正在运行,但此实现不在我在 jsfiddle 网站上显示的代码中,因为我没有在互联网上找到合适的图像

  • -tab的背景图,占了整个tab,不知道该放哪里?

请检查并运行我的实现 here on jsfiddle ,在css代码中,我使用了background-color而不是 background-image只是为了表达我想要实现的,但我需要使用 background-image作为标签背景。

我尝试了什么:

  • 我试图将标签背景图片放在<li>上但它会隐藏icon image 已经在<li> ,

  • 我试图将标签背景图片放在<a>上但它也会在鼠标悬停时隐藏制表符分隔符图像

那么如何在选项卡实现上摆脱这个层问题呢? (请不要建议我使用较少的图像,因为使用这些图像是此应用程序的一项要求。)

(顺便说一句,我提到的所有图像都有鼠标“悬停”对应物)

最佳答案

如果不想改变HTML,可以使用伪元素:

fiddle :http://jsfiddle.net/Pq7LC/39/

li:before{
content: "";
background: pink;
width: 20px;
height: 61px;
display: block;
position:absolute;
}
li:first-child:before{ /* Don't add image border before first li */
content:none;
}

关于html - 使用 <ul><li> 的简单选项卡实现,但如何设置选项卡背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7847655/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com