Class 自定义下划线图像的CSS3转换

嗨，朋友们，我正在寻找一个严格的CSS3修复程序，用于使用背景图像和嵌套在导航列表中的自定义下划线上的不透明度转换。经过一些研究，我意识到当前不支持背景图像转换，因此我尝试使用pseudo类构建一个不透明度转换：在此之前，我相信目前最新版本的Chrome和Firefox都可以使用pseudo类。任何人能提供的任何帮助都将不胜感激，我在网络上到处寻找，找不到任何其他人尝试在自定义下划线背景图像上执行转换，所以希望它能阻止对某人的一个小小挑战

以下是我目前拥有的代码：

.sf-menu, .sf-menu * {
margin:0 auto;
padding:0;
list-style: none;}


.sf-menu {
float: left;
margin-left:27%;}


ul.sf-menu li {
position:relative;
line-height:40%;
margin-left:10px;
margin-right:10px;}


ul.sf-menu > li {
float: left;}


ul.sf-menu li {
white-space: nowrap; /* no need for Supersubs plugin */
*white-space: normal; /* ...unless you support IE7 (let it wrap) */ }  


ul.sf-menu li:hover > a {
background: url(../images/UNDERLINE.png) repeat-x 100% 100%;
-webkit-opacity:1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;}


ul.sf-menu li:before  {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background: url(../images/UNDERLINE.png) repeat-x 100% 100%;
-webkit-opacity: 0.1;
-moz-opacity: 0.1;
opacity: 0.1;}`

您还可以在www.mdwoodman.co.uk上找到我的网站的当前框架

---

提前谢谢

您可以将背景图像替换为CSS边框并进行转换，以下是您网站的近似情况：

ul li a {
    color: white;
    text-decoration: none;
    font: bold 15px/150% sans-serif;
    text-transform: uppercase;
    padding: 2px 5px;
    border-bottom: solid #384740 3px;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

ul li a:hover {
    color: #BDE2DF;
    border-bottom-color: #66FFB2;
}

要转换边框颜色，您可以获取计算的颜色，或在

rgba

或

hsla

中声明颜色，例如

ul li a       { border-bottom: solid rgba(102, 255, 178, 0.1); }
ul li a:hover { border-bottom: solid rgba(102, 255, 178, 1.0); }

---

为什么需要背景图像？这似乎可以用一个简单的

边框底部来解决

您好，谢谢您的评论，我选择不使用边框底部的大部分原因是我不确定如何使边框下划线位于文本的正下方，但在li样式上仍然有足够的填充，使它们看起来美观，如上一个示例所示www.mdwoodman.co.uk是否可以在边框底部的外侧添加填充物？？？另外，我如何转换边框底部样式？life saver我已经为此努力了几天，看起来完全符合我的要求，谢谢！！！