gpt4 book ai didi

html - 在右下角显示带有背景图像的数字

转载 作者:太空宇宙 更新时间:2023-11-03 22:56:16 24 4
gpt4 key购买 nike

我正在尝试构建一个尺寸为 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>

这是您的容器,里面有编号 - 这就是您要找的东西吗?

关于html - 在右下角显示带有背景图像的数字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38319071/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com