可变高度的滑动门按钮

时间:2013-02-04 12:37:27

标签: javascript html css

我需要使用this image作为按钮的背景:

Background Image

按钮应该具有动态宽度,如果我使用sliding door技术,这不是问题。但如果你仔细观察图像:顶部和底部边缘有点弯曲,所以它不起作用。

我试图拉伸图像,但边缘变得模糊。

有人知道这个问题的解决方案吗? 任何想法都表示赞赏!

编辑:
有些页面已经有几个固定宽度/高度的按钮,每个都是“个人”背景:所以它们看起来很清晰。如果我在“我的”按钮上使用图像拉伸技术,那么它们之间会有对比,因为这个看起来不那么尖锐。

2 个答案:

答案 0 :(得分:0)

是的,你可以用CSS做到这一点, 如果您愿意,可以保留图像:

button{
  height:50px;
  background-image:url("http://i.stack.imgur.com/lswk4.png");
  background-size: 100% 100%;
  border: none;
}

答案 1 :(得分:0)

试试这个:

div{
  height:50px;
}
div img {
    position: relative;
    width: 100%;
    height: auto;
}

<div><img src="http://i.stack.imgur.com/lswk4.png" /></div>

示例:http://jsfiddle.net/Q8f9t/4/