Question

我在图像上使用了三个按钮来给出一个按钮的印象。

正常/悬停/有效。

这是一张图片：

enter image description here

为正确状态选择正确图像的CSS代码如下：

#btnSet1 {
    position: absolute;
    left: 200px;
    top: 100px;
}
.btn1 a {
    padding: 0px;
    text-decoration: none;
    opacity: 0.7;
}
.btn1 a.link1 p {
    position: relative;
    text-align: center;
    left: -10px;
    top: 20px;
    color: white;
    font-family: sans-serif;
    text-decoration: none;
    text-shadow: 5px 5px 5px #111;
    opacity: 1;
}
.btn1 a.link1:link {
    display: block;
    height: 90px;
    width: 144px;
    background: url(../images/btn3.png) no-repeat 0 0;
}
.btn1 a.link1:hover {
    display: block;
    height: 90px;
    width: 144px;
    background: url(../images/btn3.png) no-repeat 0px -90px;
}
.btn1 a.link1:active {
    display: block;
    height: 90px;
    width: 144px;
    background: url(../images/btn3.png) no-repeat 0px -180px;
}
.btn1 a.link1:visited {
    display: block;
    height: 90px;
    width: 144px;
    background: url(../images/btn3.png) no-repeat 0px -270px;
}
#tHeader {
    position: absolute;
    top: 100px;
    left: 300px;
}

我让这些图像很大，因为我需要偶尔缩放它们。 HTML图像元素可用于拉伸任何图像，但我只显示具有CSS样式的总图像的区域。因此，为了清楚起见，让我们将每个按钮面调用一个视图...所以，如何在代码中拉伸每个按钮面的视图，因为x y指的是图像的未缩放指标？

Answer 1

如何使用CSS background-size？

.btn1 a.link1:link {
    background-size: 144px 90px;
}

这篇文章有更多信息 - Set size on background image with CSS?

Answer 2

背景大小

精灵*

<强> PX

<强> CSS

div{
 width:75px;height:45px;
 background:url(http://i.stack.imgur.com/8yNbR.png) no-repeat 0px 0px;
 background-size:75px 135px;
 text-align:center;
 line-height:45px;
}
div:hover{
 background-position:0px -45px;
}

<强>演示

http://jsfiddle.net/katPx/

<强>百分比

<强> CSS

div{
 width:75px;height:45px;
 background:url(http://i.stack.imgur.com/8yNbR.png) no-repeat 0% 0%;
 background-size:100% auto;
 text-align:center;
 line-height:45px;
}
div:hover{
 background-position:0% 50%;
}

<强>演示

http://jsfiddle.net/katPx/1/

最后一个根据容器大小自动缩放。

使用课程

.btns{
 width:75px;height:45px;
 background:url(http://i.stack.imgur.com/8yNbR.png) no-repeat 0% 0%;
 background-size:100% auto;
 text-align:center;
 line-height:45px;
}
.btns:hover{
 background-position:0% 50%;
}

HTML

<div class="btns">whatever</div>

<强>演示

http://jsfiddle.net/katPx/2/

Answer 3

您可以使用基于百分比的background-size和background-position来实现此目的。这是一个可以适应您需求的基本工作示例。

JSFiddle

a {
    display: block;
    background-image: url('http://i.stack.imgur.com/8yNbR.png');
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
}
a:hover {
    background-position: 0 50%;
}
a:active {
    background-position: 0 100%;
}
a.big {
    width: 150px;
    height: 90px;
}
a.small {
    width: 75px;
    height: 45px;
}

如何在使用各种背景位置时缩小CSS背景图像？

3 个答案: