在右下方显示一个带有背景图像的数字 [英] Displaying a number at bottom-right with a background image
问题描述
我试图建立一个尺寸为26x26像素的容器，并在此容器的右下方显示一个数字。此外，我想为该容器添加一个背景的24x24图片。
我到目前为止的代码如下
< html>
< style>
body {
height：26px;
width：26px;
background-color：red;
}
#bottom {
vertical-align：bottom;
text-align：right;
background-color：yellow;
}
< / style>
< body>
< p id =bottom> 2< / p>
< / body>
< / html>
这里是一个JSFiddle链接，使事情更容易 https://jsfiddle.net/n8ku715x/
正如你从JSFiddle看到的，它不是完全加工。它甚至不设置正确的尺寸。任何帮助是赞赏。
< style& body {} #ctn {height：26px; background-color：red; width：26px; position：relative} #bottom {position：absolute; bottom：0; right：0; font-size：8px; color：#fff}< / style>< body> < p id =ctn>< span id =bottom> 2< / span>< / p>< / body>
这是你的容器，里面的数字是你在找什么？
I am trying to build a container with the dimensions of 26x26 pixels and display a number at the very bottom right of this container. In addition, I would like to add a background 24x24 picture to the container.
The code I have so far is as follows
<html>
<style>
body {
height:26px;
width:26px;
background-color:red;
}
#bottom {
vertical-align:bottom;
text-align:right;
background-color:yellow;
}
</style>
<body>
<p id="bottom">2</p>
</body>
</html>
And here's a JSFiddle link to make things easier https://jsfiddle.net/n8ku715x/
As you can see from JSFiddle, it is not entirely working. It's not even setting the right dimensions. Any help is appreciated.
<style>
body {
}
#ctn {
height: 26px;
background-color: red;
width: 26px;
position:relative
}
#bottom {
position: absolute;
bottom: 0;
right: 0;
font-size: 8px;
color: #fff
}
</style>
<body>
<p id="ctn"><span id="bottom">2</span></p>
</body>
Here's your container, with the number within it - is that what you were looking for?
这篇关于在右下方显示一个带有背景图像的数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
