Question

基本上我想要一个透明的性感，反应灵敏的圆形按钮，这样你就可以通过它看到背景，但是有一个不透明的轮廓，所以你可以看到按钮和不透明的文字（或者我可能会添加一个字体真棒图标at后期）。

这是我的JS小提琴，所以你可以看到我想要做的事情：

.round-button {
    width:25%;
}
.round-button-circle {
    width: 100%;
    height:0;
    padding-bottom: 100%;
    border-radius: 50%;
    border:10px solid #98a1a4;
    overflow:hidden;
}
.round-button-circle {
    width: 100%;
    height:0;
    padding-bottom: 100%;
    border-radius: 50%;
    border:10px solid #98a1a4;
    overflow:hidden;

    background: #fff; 
    background-opacity: 0;
    box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
    background:#30588e;
}
.round-button a {
    display:block;
    float:left;
    width:100%;
    padding-top:50%;
    padding-bottom:50%;
    line-height:1em;
    margin-top:-0.5em;

    text-align:center;
    color:#e2eaf3;
    font-family:Verdana;
    font-size:1.2em;
    font-weight:bold;
    text-decoration:none;
}

提前致谢！

Answer 1

你可以而且应该使用rgba来获得具有透明度的颜色。最后一个参数是透明度级别，从0到1的任何数字。下面的颜色大致相当于＆＃34;＃98a1a4。＆＃34;

border: 10px solid rgba(151, 162, 164, 0.25);

Answer 2

没有chmod。可能你正在寻找这个：

background-opacity

小提琴：http://jsfiddle.net/xppow236/

制作一个带有不透明边框和文字/字体真棒图标的透明圆圈按钮

2 个答案: