Question

我有3个图像，一个应该重复的中心块和两个末端部分（左和右）。我希望能够使用这三个图像生成下面的按钮。

这是完整的按钮。

Button

抱歉黑暗的背景。

到目前为止我已经有了这段代码。

li {
  background-image: url(/images/middle.png), url(/images/right.png), url(/images/left.png);
  background-position: center, right, left;
  background-repeat: repeat-x, no-repeat, no-repeat;
}

生成此按钮。

Button 2

任何人都知道为什么我的按钮看起来像以及如何渲染上面的第一个按钮？我必须使用3个给定的图像。不，这不是家庭/学校的任务：）

编辑：我找到了关于如何解决问题的this教程。难道没有更好的方法来解决问题，可能是一种更加语义化的方式吗？

Answer 1

就个人而言，我会尽量保持简单，并在按钮中间使用1个repeat-x图像，并使用CSS3圆角完成边缘。优雅地降级为方形按钮。一个很好的例子是JQueryUI.com的“下载”按钮：

Download button from JQueryUI.com

如果您只想支持符合CSS3标准的浏览器，那么您可以在background-image附加多个图片。

Can I have multiple background images using CSS?

但是，在CSS3之前，每个HTML元素只能附加1个background-image。您尝试附加3，并且CSS中的最后2个图像被忽略。

您找到的教程是您尝试创建的按钮类型的一个很好的解决方案。它定义了至少3个附加图像的元素。他们使用4，但你只能使用3。

我认为到目前为止你的HTML看起来像这样：

<ul>
  <li>
    <a href="#" title="My Text button">My Text</a>
  </li>
</ul>

所以你有两个要附加的元素;你还需要至少1个：

<ul>
  <li class="link-button">
    <a href="#" title="My Text button"><span>My Text</span></a>
  </li>
</ul>

应该这样做。那么CSS：

li.link-button {
  background: url(/images/middle.png) repeat-x;
}
.link-button a {
  background: url(/images/left.png) left center no-repeat;
}
.link-button span {
  background: url(/images/right.png) right center no-repeat;
}

jsFiddle

但是，中间重复的图像是不同的颜色！

Answer 2

这是“老派”版本：）

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        ul {
            list-style: none;
        }

        li {
            clear: both;
        }

        .list_button {
            text-decoration: none;
        }

        .left {
            float: left;
            width: 3px;
            height: 23px;
            background: url("./images/left.png") left center no-repeat;
        }

        .right {
            float: left;
            width: 3px;
            height: 23px;
            background: url("./images/right.png") left center no-repeat;
        }

        .middle {
            float: left;
            height: 23px;
            background: url("./images/middle.png") repeat-x;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <a href="#" class="list_button">
                <div class="left"></div>
                <div class="middle">First</div>
                <div class="right"></div>
            </a>
        </li>
        <li>
            <a href="#" class="list_button">
                <div class="left"></div>
                <div class="middle">Second</div>
                <div class="right"></div>
            </a>
        </li>
    </ul>
</body>
</html>

使用3张图像创建按钮

2 个答案: