带有图像的html5按钮

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

#关于{
位置：绝对位置；
背景图片：url（'Content/images/about.png'）；
高度：100px；
宽度：100px；
}

您需要将此属性添加到

#about

,

background-repeat: no-repeat;

填充将更改按钮的宽度，并且不会影响图像定位，如果要移动背景图像，请尝试此操作

background-position: x y;

这里

x

和

y

是图像的坐标

此外，您可以重新考虑并使用

背景

速记，以提高可读性

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

---

现在图片不再重复，但填充只会改变按钮的宽度……编辑了我的答案，请看一看