Question

我在下方有一个按钮，我正在尝试在文本的左侧添加图像。无论如何使用此图像执行此操作：http://res.cloudinary.com/djxai1v1e/image/upload/v1498058230/HR-Connect-Logo_hjbrmn.png而不更改按钮的高度？我可以将图像放在按钮中，但它一直在弄乱高度。任何事都有帮助，欢呼。

{{1}}

{{1}}

Answer 1

使用background-image CSS属性：

＆＃13;

.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;

＆＃13;

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

＆＃13;

要使其显示在box-shadow过渡效果之上，您需要将其置于伪元素中：

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

按钮CSS中的图像

1 个答案: