2

我希望这对你来说应该很容易:) 我正在尝试制作三个带有重复背景图像的按钮。我使用两个<button>和一个链接<a>。它适用于链接，但不适用于按钮 - 侧面图像（圆角）不会出现。这是html：

<!doctype html>
<html>

<head>
    <title>Task 1</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
    <link rel="stylesheet" type="text/css" href="task1.css">
</head>

<body>
<button class="blue-btn"><span id="left">&nbsp;</span>OK<span id="right">&nbsp;</span></button><br/>
<button class="blue-btn"><span id="left">&nbsp;</span>Cancel<span id="right">&nbsp;</span></button><br/>
<a href="#" class="blue-btn"><span id="left">&nbsp;</span>View More Information<span id="right">&nbsp;</span></a>
</body>
</html>

这是CSS：

.blue-btn{
    background: url('button-repeat.png') repeat-x;
    border:0;
    height:55px;
    font: 14px/44px Myriad-Pro, sans-serif;
    color:black;
    cursor:pointer;
}
a{
    display:inline-block;
    text-decoration:none;
}
#left{
    display:block;
    background: url('button-left.png') no-repeat;
    height:55px;
    width:24px;
    float:left;
    margin-left:-24px;
}
#right{
    display:block;
    background: url('button-right.png') no-repeat;
    height:55px;
    width:24px;
    float:right;
    margin-right:-24px;
}
4

3 回答 3

2

我很确定你不能那样做。您可能不得不放弃使用<button>s 并为常规元素（可能是 或 ）设置样式以<a>使其<span>看起来<div>像一个按钮。

于 2013-03-21T13:49:58.553 回答
0

尝试在不使用跨度的情况下设置按钮样式，而是使用多个背景图像和多个位置。

.button {
background-image: url(), url();
background-position: left top, right top;
}

*请注意，不支持IE 8 和 IE9 。

于 2013-03-21T14:02:37.893 回答
0

有一些位置魔法是可能的。使 blue_btn 位置：相对，左右部分应为位置：绝对。也不要使用 id 来设置样式，在按钮部分添加一些有意义的类名。

.blue-btn{
  position: relative;
}

.btn-right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 10px;
}
.btn-left {      
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10px;
}

提琴手

于 2013-03-21T14:17:14.247 回答