带有图像的Html5按钮

Question

我想在logo图片上添加一些按钮。我设置了第一个按钮，并尝试将其定位在徽标图片的右上角…图片的宽度是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;