CSS:在图像的右上角浮动一个数字值 [英] CSS : Float a number value on the right top corner of an image

问题描述

我正在尝试在图像的右上方浮动一个数字.我希望该数字具有背景色，并在右上角图像的一小部分上覆盖.

I'm trying to float a number on the right top of an image. I want this number to have a background-color and overlay on top of a small portion of the image on the right top corner.

我已经尝试过:

<li class=topoulimg><span id=bell><img src=img-img/bell.png alt=alerts></span><span class=bellnumbers>10</span></li>

css

.bellnumbers{
float:right;
font-size:12px;
background-color:red;
width:10px;
height:10px;
color:#fff;
}

但是它不起作用.

http://jsfiddle.net/yv5q4gvm/

推荐答案

您可以尝试...

<span class="bell">
        <img src=https://cdn4.iconfinder.com/data/icons/simplicio/64x64/message.png alt=alerts>
    <span class="bellnumbers">10</span>
</span>

.bell {
    display: inline-block;
    position: relative;
    background-color: #eee;
    width: 48px;
    height: 42px;
    text-align: center;
    padding-top: 6px;
}
.bell img {
    width: 24px;
    height: 24px;
    padding-top: 10px;
}
.bellnumbers {
    font-size:12px;
    background-color:red;
    width:16px;
    line-height: 16px;
    text-align: center;
    color:#fff;
    z-index: 2;
    border-radius: 3px;
    position: absolute;
    left: 28px;
}

JSFiddle

这篇关于CSS:在图像的右上角浮动一个数字值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！