在Html中将图像置于按钮上方_Html_Css

在Html中将图像置于按钮上方

html css

在Html中将图像置于按钮上方,html,css,Html,Css,我想设计一个像这样的按钮我写了一个创建按钮的代码 CSS HTML 播放但结果是谁能帮我把img放在左边的按钮上吗？你们可以用绝对位置来显示图像 .button { position:relative; } img { display: inline-block; width:20px; height:70px; position:absolute; left:2px;

我想设计一个像这样的按钮

我写了一个创建按钮的代码

CSS

HTML

播放

但结果是

谁能帮我把img放在左边的按钮上吗？

你们可以用绝对位置来显示图像

.button {
        position:relative;
    }
img {
        display: inline-block;
        width:20px;
        height:70px;
        position:absolute;
        left:2px;
        top:-13px
    }

您可以对图像使用

绝对位置
.button {
        position:relative;
    }
img {
        display: inline-block;
        width:20px;
        height:70px;
        position:absolute;
        left:2px;
        top:-13px
    }

请使用以下代码：
CSS:

.按钮{
颜色：白色；
宽度：210px；
高度：35px；
文本对齐：左对齐；
边界：0px；
字体大小：15磅；
填充：0 65px；
光标：指针；
盒影：2px2p5pxHSLA（0,0%，0%，0.7）；
文本阴影：0px 0px 1px hsla（0,0%，0%，0.8）；
边界半径：5px；
背景：-webkit线性梯度（左，#cdb060 0%，#a5862e 100%）；/*铬10+，Safari5.1+*/
背景颜色：橙色；
}
img{
显示：块；
左：0；
位置：绝对位置；
前-2%；
z指数：1；
}

和HTML：
<body>
   <button class="button">Play Trauker</button>
   <img src="img/play-stop.png" />
</body>


玩特劳克
请使用此代码：
CSS:

.按钮{
颜色：白色；
宽度：210px；
高度：35px；
文本对齐：左对齐；
边界：0px；
字体大小：15磅；
填充：0 65px；
光标：指针；
盒影：2px2p5pxHSLA（0,0%，0%，0.7）；
文本阴影：0px 0px 1px hsla（0,0%，0%，0.8）；
边界半径：5px；
背景：-webkit线性梯度（左，#cdb060 0%，#a5862e 100%）；/*铬10+，Safari5.1+*/
背景颜色：橙色；
}
img{
显示：块；
左：0；
位置：绝对位置；
前-2%；
z指数：1；
}

和HTML：
<body>
   <button class="button">Play Trauker</button>
   <img src="img/play-stop.png" />
</body>


玩特劳克
这是您的friend@bubimgbutton很好，但它不接受文本…我想添加toxt到按钮是您的friend@bubimgbutton很好，但它不接受文本…我想在按钮中添加toxt你把图像放在按钮内…我想把它放在按钮上，img的高度比按钮高你的html在按钮内有图像。我的意思是我想播放图标的高度必须大于按钮的高度……在您的解决方案中，img和按钮的高度相同。您可以增加图像高度和顶部位置，如顶部：-13px；这段代码有效，但如果你在页面上放置2个按钮，img不在按钮上，你将图像放在按钮内…我想将它放置在按钮上，img的高度比按钮高。你的html在按钮内有图像。我的意思是，我想播放图标的高度必须大于按钮的高度……在你的解决方案中，img和按钮的高度是相同的您可以增加图像高度和顶部位置，如顶部：-13px；这段代码有效，但如果你在页面上按2键，img按钮就不会结束
<body>
   <button class="button">Play Trauker</button>
   <img src="img/play-stop.png" />
</body>