如何实现图标/图像等通知答案

【问题标题】：How to implement notification like icon/image如何实现图标/图像等通知
【发布时间】：2017-11-09 00:21:26
【问题描述】：

我需要以移动设备中常见的通知样式构建一个有点动态的图标/图像。我必须澄清一下，主显示器将在桌面上。图像将位于某些文本之前例如

一些文字

这包括 2 个图像：望远镜和齿轮加上一个动态的数字。

我对 css 几乎是全新的，所以我正在努力如何相对于望远镜放置齿轮以及如何根据数字缩放齿轮（例如，如果数字是 10000，则齿轮需要大于如果是 3)。

当然，整个组合也需要很好地适应屏幕尺寸。如何以一种有点优雅的方式来解决这个问题？

我的 html 看起来像

<div class="sidebar-item active">
            <a href="#">
                <img class="lab-image"/>
                <span class="sidebar-item-title">Labs</span>
            </a>
</div>

但现在我的实验室图像只是望远镜图像。

【问题讨论】：

如果你使用的 CSS 意味着你也在使用 HTML，你能发布你用来创建这个图标结构的 HTML 吗？
我将其添加到问题中。
那么通知的数量是从哪里来的； CSS 应该如何“知道”是否显示0、1...？齿轮图标应该从哪里来？
齿轮和望远镜现在是固定大小的图像。该数字来自后端代码，它会根据用户和其他因素而变化。
但是它是从哪里注入到 HTML 中的？如果它不在 HTML 中（无论是作为文本节点还是属性值），那么 CSS 就不会“看到”它。

标签： html css angular twitter-bootstrap-3

【解决方案1】：

您正在寻找的是带有自定义背景图像的徽章所以，基于this，我创建了这个小提琴

$(document).ready(function(){
var cw = $('.inner-badge').width();
$('.inner-badge').css({'height':cw+'px'});
})

body {
  margin: 25px
}
.outter-badge {
  position: relative;
  margin: 10px;
  background: #fff;
  width: 64px;
}
.inner-badge {
  display: table;
  position: absolute;
  top: -15px;
  right: -25px;
  background-image: url('https://openclipart.org/image/2400px/svg_to_png/174149/fancy-badge.png');
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}
.inner-badge p{
  display: table-cell;
    vertical-align: middle;
padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outter-badge"> 
  <img src="http://www.iconarchive.com/download/i88396/icons8/ios7/Industry-Microscope.ico" alt="" height="64">
  <div class="inner-badge">
    <p>1000</p>
  </div>
</div>

【讨论】：

【解决方案2】：

NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(intent);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    notificationBuilder.setSmallIcon(intent.getResources().getIdentifier(appIcon + "_transparent", "drawable", intent.getPackageName()));
}else{
    notificationBuilder.setSmallIcon(intent.getResources().getIdentifier(appIcon, "drawable", intent.getPackageName()));
}
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    Bitmap icon = BitmapFactory.decodeResource(intent.getResources(), intent.getResources().getIdentifier(appIcon, "drawable", intent.getPackageName()));
    notificationBuilder.setLargeIcon(icon);
}
notificationBuilder.setContentTitle(title)
        .setStyle(new NotificationCompat.BigTextStyle().bigText(message))
        .setContentText(message)
        .setSound(defaultSoundUri)
        .setPriority(NotificationCompat.PRIORITY_HIGH)
        .setVisibility(NotificationCompat.VISIBILITY_PUBLIC)
        .setAutoCancel(true)
        .setContentIntent(pendingIntent);

【讨论】：

对不起，我应该说显示器将主要在桌面上，但我使用的是移动设备中常见的概念。