Question

我不知道该怎么称呼，我正在搜索，但是在任何地方都找不到它，但是我知道有一种简便的方法。

如何简单地将其中一个指向我的<div>的信息框放在其中？

类似，但其中包含文本： https://static.thenounproject.com/png/153178-200.png并指向我的div

Answer 1

这样的前置元素来完成此操作

<div class="block"></div>


.block {
  width: 150px;
  height: 150px;
  margin-top: 150px;
  margin-left: 150px;
  position: relative;
  background: green;
}
.block::before {
  display: block;
  background-image: url('https://static.thenounproject.com/png/153178-200.png');
  content: 'Hello I am text';
  text-align: center;
  padding: 15px;
  position: absolute;
  height: 100px;
  width: 100px;
  top: -100px;
  left: 0;
  background-size: auto 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

Answer 2

您是否尝试过使用Bootstrap Alerts？您还可以在带有jQuery的警报中使用.show()和.hide()。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>

如何发布信息消息？

2 个答案: