剪出图像的中间部分（显示示例）？

这是我见过的Grooveshark完成的工作，它不需要使用多个图像来扩展按钮等。剪出图像的中间部分（显示示例）？

基本上，这样

enter image description here

的图像被用于产生任何宽度比所述图像本身更小的按钮。我认为这是通过某种方式修剪中间，但我不知道如何。我已经查看了CSS属性的使用情况here但似乎无法找出除了填充任何一边15px之外做了什么。

有谁知道如何复制相同的效果？为了清楚起见，我正在讨论的是切出一个按钮的中间部分（我知道我已经给出了4个按钮样式的精灵图片，所以当我说“切除图像的中间部分”）。

来源

2011-09-30 Avicinnian

你说什么是被称为sliding doors技术。通过将背景图像应用于容器元素以显示左边缘，可以将相同的图像应用于仅显示右边缘的另一个元素。

例如：

.menu li { 
    background: url(button-sprite.png) 0 0 no-repeat; 
    padding-left: 10px; 
} 

.menu li a { 
    background: url(button-sprite.png) 100% 0 no-repeat; 
    display: block; 
}

列表项示出了图像的左边缘。填充允许左边显示何时将另一个元素放置在顶部。

锚点元素显示图像的右边缘，并将其裁剪为文本内容的所需宽度。

来源

2011-09-30 05:48:41

但是，您如何让''元素向右扩展背景图像而不是向左，因为默认情况下，图像的右边缘在任何中间点之前都需要显示？当然一个简单的“float：right;'不会做？ – Avicinnian

你说'background-position：right'，它会一直“粘”到右边。 – CyberDude

+1与CSS兼容是一个问题的完美答案 – Serdalis

我知道没有办法处理图像一样，在CSS，
我想你会发现，他们要做的是有顶部图像和底部图像总是顶部和底部，只需填写其余与中间图像。这也适用于每一方，我将添加CSS3代码，CSS2代码应该很容易确定。

这看起来像（CSS3）：

.button_horizontal { 
    background: url(topimage) top left no-repeat, 
       url(bottomimage) bottom left no-repeat, 
       url(middleimage) top left repeat-y; 

} 


.button_vertical { 
    background: url(left.png) top left no-repeat, 
       url(right.png) top right no-repeat, 
       url(middle.png) top left repeat-x; 
}

这看起来像（CSS2）：

.top { 
    background: url(top.png) top left no-repeat; 
    width:100%; 
    height:10px; 
} 

.middle { 
    background: url(bottom.png) bottom left no-repeat; 
    width:100%; 
    height:180px; 
} 
.button{ 
    background: url(middle.png) top left repeat-y; 
    width:500px; 
    height:200px; 
} 

<div class="button"> 
    <div class="top">&nbsp;</div> 
    <div class="middle"><p>stuff goes in here :D</p></div> 
</div>

来源

2011-09-30 05:41:22 Serdalis

啊，所以在这个例子中，它将是一个CSS3多图像背景，每个图像的背景位置属性被设置？ – Avicinnian

是的，它会。尽管如此，我也会为你准备一个CSS2版本。 – Serdalis

CSS允许将背景图像移动到任何位置。为了显示你需要定义像下面的CSS背景的一部分：

.button { 
    background: transparent url(sprite.png) left top no-repeat; 
    display: block; 
    height: 40px; 
    width: 160px; 
} 
.button:hover { 
    background-position: left bottom; 
} 
.button:focus { 
    background-position: left center; 
/* or 
    background-position: left -50%; 
    background-position: left -40px; 
*/ 
}

来源

2011-09-30 05:49:50 Andrey

@Pixelatron;我知道你接受了答案，但检查这个例子可能是是帮助您轻松&解决方案，以及http://jsfiddle.net/sandeep/CQmJz/

CSS：

a{ 
    text-decoration:none; 
    display:inline-block; 
    background:url(http://i.stack.imgur.com/gYknG.png) no-repeat 0 0; 
    position:relative; 
    padding:8px 0 8px 10px; 
    height:17px; 
} 
a:after{ 
    content:""; 
    display:block; 
    background:url(http://i.stack.imgur.com/gYknG.png) no-repeat -490px 0; 
    position:absolute; 
    height:33px; 
    width:10px; 
    top:0; 
    right:-10px; 
} 


a:hover{ 
    background-position:0 -34px; 
} 
a:hover:after{ 
    background-position:-490px -34px; 
}

来源

2011-09-30 06:11:42 sandeep

道具，一个很好的例子:)！ – Avicinnian

这就是所谓的border-image。

来源

2011-09-30 06:25:03

剪出图像的中间部分（显示示例）？

回答

相关问题