我需要将此图像用作按钮的背景:
按钮应该具有动态宽度,如果我使用滑动门技术,这不是问题。但是如果你仔细观察图像:顶部和底部边缘有点弯曲,所以它不起作用。
我试图拉伸图像,但边缘变得模糊。
有人知道这个问题的解决方案吗?
任何想法表示赞赏!
编辑:
一些页面已经有几个固定宽度/高度的按钮,每个按钮都是“个人”背景:所以它们看起来很清晰。如果我在“我的”按钮上使用图像拉伸技术,那么它们之间就会有对比,因为这个看起来不会那么锐利。
我需要将此图像用作按钮的背景:
按钮应该具有动态宽度,如果我使用滑动门技术,这不是问题。但是如果你仔细观察图像:顶部和底部边缘有点弯曲,所以它不起作用。
我试图拉伸图像,但边缘变得模糊。
有人知道这个问题的解决方案吗?
任何想法表示赞赏!
编辑:
一些页面已经有几个固定宽度/高度的按钮,每个按钮都是“个人”背景:所以它们看起来很清晰。如果我在“我的”按钮上使用图像拉伸技术,那么它们之间就会有对比,因为这个看起来不会那么锐利。
是的,你可以用 CSS 来做,如果你愿意的话,你可以保留图像:
button{
height:50px;
background-image:url("http://i.stack.imgur.com/lswk4.png");
background-size: 100% 100%;
border: none;
}
尝试这个:
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/