html - 带有图像的 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;