按钮边框透明度图像上

Question

如何将按钮的边框定位在图像顶部时半透明？

Answer 1

在CSS中 .button {border：5px solid rgba（2,4,233,0.1）; }

rgba（）＆lt; - 把你的颜色，最后一个参数是不透明度

Answer 2

请更新代码 codepen

＆＃13;

＆＃13;

.button {
  width: 218px;
  height: 57px;
  background: #1abc9c;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -28px -109px;
  line-height: 57px;
  text-align: center;
  color: #fff;
  text-decoration: none; 
  font-size: 23px;
  text-transform: uppercase;
  border: 7px solid rgba(120,216,197,.5);
  background-clip: padding-box;
  display: none;
}
.image-holder{
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.image-holder img{
  vertical-align: top;
}
.image-holder:hover .button{
  display: block;
}

＆＃13;

<div class="image-holder">
  <a href="#" class="button">Go Ahead</a>
  <img src="http://lorempixel.com/400/200/city" alt="" />
</div>

＆＃13;

＆＃13;

＆＃13;