如何制作带有标签的圆形图像？

谢谢。

我曾经尝试这样做的CSS使图像圆润，但我不能做一个标签像这样提供的图像。

.img-circle { 
    border-radius: 50%; 
    width: 25%; 
    height: 25%; 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: middle; 
} 

<img src=".." class="img-circle" />

来源

2016-08-14 more 2 know

请提供[** ** MVCE（http://stackoverflow.com/help/mcve）。您需要至少显示您迄今为止尝试过的代码。 – Ricky

好的，谢谢，我已经添加了我的代码。 –

您可以使用一个元素与img内，并添加:after伪元素，或者您可以使用图像作为background

.el { 
 
    border-radius: 50%; 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    border: 2px solid red; 
 
} 
 
.el:after { 
 
    content: '1'; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 30px; 
 
    background: red; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    color: white; 
 
}

<div class="el"> 
 
    <img src="http://placehold.it/100x100"> 
 
</div>

来源

2016-08-14 20:10:42

您可以通过使用data-label等属性来改善这一点，然后使用** attr（）css函数**设置内容，这将允许用户在标记中定义文本。 [** DEMO **]（https://jsfiddle.net/rickyruizm/dec6cdrc/） – Ricky

@Ricardo Ruiz这很好，但我不确定浏览器的支持，所以我会离开答案，因为它是。 –

如果内容属性中没有定义支持，那么支持是非常糟糕的，但是在内容中它应该没问题。 [用于内容支持]（http://caniuse.com/#feat=css-gencontent）vs [未在内容支持中使用]（http://caniuse.com/#feat=css3-attr） – Ricky

您可以创建包装，将包含图像和标签，如下所示： https://jsfiddle.net/9e7h2LLf/

.wrapper{ 
    border-radius: 50%; 
    border: 2px solid red; 
    height: 100px; 
    width: 100px; 
    overflow: hidden; 
    position: absolute; 
} 

img { 
    height: 100px; 
    width: 100px; 
} 

.label { 
    background-color: red; 
    height: 30px; 
    line-height: 30px; 
    width: 100%; 
    position: absolute; 
    bottom: 0px; 
    color: white; 
    text-align: center; 
} 

<div class="wrapper"> 
    <img src="https://image.freepik.com/free-vector/bathroom-mosaic-pattern_23-2147497370.jpg"> 
    <span class="label">1</span> 
</div>

或者创建一个圆形包装，并使用图像作为背景，喜欢这里： https://jsfiddle.net/3jmfcudo/

.wrapper{ 
    border-radius: 50%; 
    border: 2px solid red; 
    height: 100px; 
    width: 100px; 
    overflow: hidden; 
    background-image: url("https://image.freepik.com/free-vector/bathroom-mosaic-pattern_23-2147497370.jpg"); 
    background-size: contain; 
    position: absolute; 
} 

.label { 
    background-color: red; 
    height: 30px; 
    line-height: 30px; 
    width: 100%; 
    position: absolute; 
    bottom: 0px; 
    color: white; 
    text-align: center; 
} 

<div class="wrapper"> 
<span class="label">1</span> 
</div>

来源

2016-08-14 20:42:32 niemaszoka

如何制作带有标签的圆形图像？

回答

相关问题