Question

这对你来说应该很容易我希望:) 我正在尝试制作三个带有重复背景图像的按钮。我使用了两个<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;
}

Answer 1

我很确定你做不到。您可能不得不放弃使用<button>并将常规元素（可能是<a>，<span>或<div>）设置为按钮。

Answer 2

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

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

*请注意，IE 8和IE9为not supported。

Answer 3

有可能使用某种位置魔法。使blue_btn位置：相对，左右部分应为position：absolute。也不要使用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;
}

Jsfiddle

背景图像不会出现在按钮内的跨度中

3 个答案: