适合边框内的内容

Question

刚写了一些新手css的代码。我不知道如何在边框内放置图像！我想在圆形边框内放置水图标！请运行下面的代码段

.notice {
  position: relative;
  margin: 1em;
  background: #f3fff2;
  padding: 1em 1em 1em 2em;
  border-left: 4px solid #DDD;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
}

.notice:before {
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: -17px;
  background-color: #DDD;
  color: #FFF;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  font-family: Georgia;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}

.info {
  border-color: #e4ffe0;
}

.info:before {
  content: url('http://www.free-icons-download.net/images/water-droplet-icon-72075.png');
  background-color: #e4ffe0;
}

<div class="notice info">
  <p>This is a an info notice, it provides feedback of a neutral nature to the user.</p>
</div>

Answer 1

将内容图片用作background ...您可以轻松控制图片大小

Stack Snippet

.notice {
  position: relative;
  margin: 1em;
  background: #f3fff2;
  padding: 1em 1em 1em 2em;
  border-left: 4px solid #DDD;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
}

.notice:before {
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: -17px;
  background-color: #DDD;
  color: #FFF;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  font-family: Georgia;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}

.info {
  border-color: #e4ffe0;
}

.info:before {
  content: "";
  background: #e4ffe0 url('http://www.free-icons-download.net/images/water-droplet-icon-72075.png') center/20px no-repeat
}

<div class="notice info">
  <p>This is a an info notice, it provides feedback of a neutral nature to the user.</p>
</div>

Answer 2

为什么不把它作为背景？

＆＃13;

＆＃13;

.notice {
  position: relative;
  margin: 1em;
  background: #f3fff2;
  padding: 1em 1em 1em 2em;
  border-left: 4px solid #DDD;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
}

.notice:before {
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: -17px;
  background-color: #DDD;
  color: #FFF;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  font-family: Georgia;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}

.info {
  border-color: #e4ffe0;
}

.info:before {
  content: '';
  display: inline-block;
  background: #e4ffe0 url('http://www.free-icons-download.net/images/water-droplet-icon-72075.png') no-repeat center/contain;
}

＆＃13;

<div class="notice info">
  <p>This is a an info notice, it provides feedback of a neutral nature to the user.</p>
</div>

＆＃13;

＆＃13;

＆＃13;