带图像的html5按钮

Question

我想在徽标图片上放一些按钮。我设置了第一个按钮并尝试将其放置在徽标图片的右上角...图片的宽度为100％，图片应为100x100，但是当填充时，图像会倍增....

 <header>
    <button id="about" onclick="location.href='#';"> </button>
    <img id="logo" src="Content/images/logo.jpg" /> <br/>
</header>

#about {
position: absolute;
background-image: url('Content/images/about.png');
height: 100px;
width: 100px;
}

Answer 1

您需要将此属性添加到#about，

background-repeat: no-repeat;

填充将改变按钮的宽度，不会影响图像定位，如果你想移动背景图像，试试这个，

background-position: x y;

此处x和y是图片的坐标。

此外，您可以重新考虑并使用background短手以获得更好的可读性，

background: url('Content/images/about.png') x y no-repeat;