0

我想将<a/>-tags 样式设置为按钮。背景分为三部分：

[before][text][after]

问题1：

[before]和的背景[after]重叠[text]。如果[before]/的不透明度[after]不是 100% 或背景图像具有透明像素，则背景[text]变为可见。这就是为什么我需要它们在锚之外。

问题2：

我浮动所有三个元素，但需要清除浮动才能像往常一样继续使用其他标签。

这是小提琴：http: //jsfiddle.net/WdUdy/

HTML：

<a href="" class="button">I'm a button</a>

CSS：

a.button {
    display: inline-block;
    line-height: 38px;
    padding: 5px;
    background: #616161;
    color: #E0E0E0;
    font-family: Verdana;
    float: left;    
}

a.button:before {
    content: "";
    background-color: #A50063;
    opacity: 0.5;
    display: block;
    width: 20px;
    height: 40px;
    float: left;    
}

a.button:after {
    content: "";
    background-color: #A50063;
    opacity: 0.5;
    display: block;
    width: 20px;
    height: 40px;
    float: right;
}

我将不胜感激代码片段、教程或任何其他帮助。提前致谢！

4

3 回答 3

1

当然，这是一个简单的问题，即在锚点内、文本周围添加一个跨度，并以此为基础创建伪元素？

<a href="" class="button"><span>I'm a button</span></a>

JS小提琴

于 2013-09-22T07:10:38.787 回答
0

http://jsfiddle.net/WdUdy/4/

您可以在相对定位的文本之前和之后放置绝对定位的块，高度为 100%。

a.button {
    display: inline-block;
    line-height: 38px;
    padding: 5px;
    margin-left: 30px;
    background: #616161;
    color: #E0E0E0;
    font-family: Verdana;
    float: left;
    position: relative;    
}

a.button:before {
    content: "";
    background-color: #A50063;
    opacity: 0.5;
    display: block;
    position: absolute;
    width: 30px;
    height: 100%;
    top: 0;
    left: -30px;   
}

a.button:after {
    content: "";
    background-color: #A50063;
    opacity: 0.5;
    display: block;
    position: absolute;
    width: 30px;
    height: 100%;
    top: 0;
    right: -30px;
}
于 2013-09-09T03:01:28.540 回答
0

我试过前后不使用伪。看一看：

a.button {
    display: inline-block;
    line-height: 38px;
    padding: 5px;
    background: #616161;
    color: #E0E0E0;
    font-family: Verdana;
    float: left;  
    border-left: solid 30px rgba(165, 0, 99, 0.3);
    border-right: solid 30px rgba(165, 0, 99, 0.3);
}
于 2013-09-09T03:09:38.580 回答