html - 按钮 CSS 中的图像

Question

我在下面有一个按钮，我想在文本的左侧添加一个图像。有没有办法用这张图片做这个:http://res.cloudinary.com/djxai1v1e/image/upload/v1498058230/HR-Connect-Logo_hjbrmn.png不改变按钮的高度？我可以将图像放在按钮中，但它会一直弄乱高度。任何帮助，干杯。

.button_slide {
  color: #156466;
  border: 1px solid rgba(21,100,102,0.35);
  border-radius: 0px;
  padding: 18px 30px;
  display: inline-block;
  font-family: Verdana;
  font-size: 14px;
  margin-bottom:20px;
  letter-spacing: 1px;
  background-color: rgba(255,255,255,0.3);
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #156466;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

.slide_down:hover {
  color:white;
  border: 1px solid transparent;
  box-shadow: inset 0 100px 0 0 #156466;

  <div class="button_slide slide_down">Contact HR Now ></div>

Answer 1

使用 background-image CSS 属性:

.button_slide {
  color: #156466;
  border: 1px solid rgba(21,100,102,0.35);
  border-radius: 0px;
  /* extend left padding */
  padding: 18px 30px 18px 54px;
  background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498058230/HR-Connect-Logo_hjbrmn.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  display: inline-block;
  font-family: Verdana;
  font-size: 14px;
  margin-bottom: 20px;
  letter-spacing: 1px;
  background-color: rgba(255,255,255,0.3);
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #156466;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

.slide_down:hover {
  color:white;
  border: 1px solid transparent;
  box-shadow: inset 0 100px 0 0 #156466;

<div class="button_slide slide_down">Contact HR Now ></div>

要让它出现在 box-shadow 过渡效果之上，您需要将它放在一个伪元素中:

.button_slide {
  color: #156466;
  border: 1px solid rgba(21,100,102,0.35);
  border-radius: 0px;
  /* extend left padding */
  padding: 18px 30px 18px 54px;
  position: relative;
  display: inline-block;
  font-family: Verdana;
  font-size: 14px;
  margin-bottom: 20px;
  letter-spacing: 1px;
  background-color: rgba(255,255,255,0.3);
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #156466;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

.slide_down:hover {
  color:white;
  border: 1px solid transparent;
  box-shadow: inset 0 100px 0 0 #156466;
}

.button_slide:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498058230/HR-Connect-Logo_hjbrmn.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

  <div class="button_slide slide_down">Contact HR Now ></div>