我正在使用来自font-awesome的两个图标,前面是一个+
,后面是一个圆圈。
这是一个fiddle
我正在尝试更改圆圈的背景颜色,但它不起作用。
这是代码:
.fa-plus{
background-color: red;
border-radius: 50%;
}
.wrapper{
position: relative;
width: 20%;
height: 20%;
margin: auto;
border-radius: 50%;
cursor: pointer;
border: 1px solid #000;
}
.image{
max-width: 100%;
border-radius: 50%
}
.wrapper span{
position: absolute;
bottom: 0;
right: 15%;
width: 15%;
height: 15%;
z-index: 2;
}
#input{
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
cursor: pointer;
opacity: 0;
}
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<input type="file" id="input" name="image" accept="image/*">
<img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRT2XK4W0i7icS84Yq5VHpwZ9anmDXoOFQZX0anUhWxcpL5du_">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-plus fa-stack-1x fa-inverse"></i>
</span>
</div>
我正在使用圆圈给+
图标一个圆形背景颜色,我试图只添加+
图标并给它padding
,但也没有工作:
.fa-plus{
background-color: red;
border-radius: 50%;
}
.wrapper{
position: relative;
width: 20%;
height: 20%;
margin: auto;
border-radius: 50%;
cursor: pointer;
border: 1px solid #000;
}
.image{
max-width: 100%;
border-radius: 50%
}
.wrapper span{
position: absolute;
bottom: 0;
right: 15%;
width: 15%;
height: 15%;
z-index: 2;
padding: 10%;
}
#input{
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
cursor: pointer;
opacity: 0;
}
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<input type="file" id="input" name="image" accept="image/*">
<img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRT2XK4W0i7icS84Yq5VHpwZ9anmDXoOFQZX0anUhWxcpL5du_">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-plus fa-stack-1x fa-inverse"></i>
</span>
</div>
如何解决这个问题?
在CSS中添加此属性。
i.fa.fa-circle.fa-stack-2x{
color:green;
}
如果要将加号背景从红色更改为绿色(我没有包含在代码段中)
i.fa.fa-plus.fa-stack-1x.fa-inverse {
background: green;
}
.fa-plus{
background-color: red;
border-radius: 50%;
}
i.fa.fa-circle.fa-stack-2x{
color:green;
}
.wrapper{
position: relative;
width: 20%;
height: 20%;
margin: auto;
border-radius: 50%;
cursor: pointer;
border: 1px solid #000;
}
.image{
max-width: 100%;
border-radius: 50%
}
.wrapper span{
position: absolute;
bottom: 0;
right: 15%;
width: 15%;
height: 15%;
z-index: 2;
}
#input{
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
cursor: pointer;
opacity: 0;
}
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<input type="file" id="input" name="image" accept="image/*">
<img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRT2XK4W0i7icS84Yq5VHpwZ9anmDXoOFQZX0anUhWxcpL5du_">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-plus fa-stack-1x fa-inverse"></i>
</span>
</div>
试试这个HTML和CSS。我删除了整个黑色圆圈,并将其替换为CSS剪辑路径属性作为加号的背景(对于大到中等的屏幕,它非常适用,但遗憾的是它不适用于小到中等 - 小屏幕,所以你必须为.wrapper span设置一个min-width属性,我想):
.wrapper{
position: relative;
width: 20%;
height: 20%;
margin: auto;
border-radius: 50%;
cursor: pointer;
border: 1px solid #000;
}
.image{
max-width: 100%;
border-radius: 50%
}
.wrapper span{
position: absolute;
bottom: 0;
right: 15%;
width: 15%;
height: 15%;
z-index: 2;
}
#input{
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
cursor: pointer;
opacity: 0;
}
.fa-plus{
background:black;
-webkit-clip-path: circle(38% at 50% 50%);
clip-path: circle(38% at 50% 50%);
}
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<input type="file" id="input" name="image" accept="image/*">
<img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRT2XK4W0i7icS84Yq5VHpwZ9anmDXoOFQZX0anUhWxcpL5du_">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-plus fa-stack-1x fa-inverse"></i>
</span>
</div>
将.wrapper span CSS属性替换为以下内容:
.wrapper span {
position: absolute;
bottom: 0;
right: 15%;
width: 20px;
height: 20px;
z-index: 2;
padding: 0;
line-height: 20px;
}