我想将图像添加到由CSS创建并在其中包含文本的圆圈中。我知道如何使用文本创建一个圆圈,例如,this StackOverflow问题和答案显示了如何执行此操作。这是css中的circle
定义:
circle {
background: #f00;
width: 100px;
height: 100px;
border-radius: 50%;
display: inline-block;
text-align: center;
line-height: 100px;
margin-right:5px;
}
以下是html中的内容:
<circle>THIS IS THE TEXT</circle>
现在我希望能够在圆圈中添加背景图片,如果可能的话,添加0.5的opacity
。所以基本上我想要一个带有圆形和文字形状的图像。这是一个例子:
&#34;这是文本&#34;是可以在图像顶部的html代码中写入的文本。
如何做到这一点?
答案 0 :(得分:1)
不难发现如何用文字做圆圈。 <circle>
用于SVG,因此它不是您想要的。请改用普通<div>
。这里的解决方案为背景图像提供了不透明度。
body {
background-color: #121212;
}
.circle {
position: relative;
height: 300px;
width: 300px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.circle:hover:after {
opacity: 0.5;
}
.circle:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url(https://buyersguide.caranddriver.com/media/assets/submodel/280_8204.jpg);
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
opacity: 1;
transition: opacity 300ms;
}
.circle__text {
padding: 10px;
background-color: yellow;
}
&#13;
<div class="circle">
<span class="circle__text">random text</span>
</div>
&#13;
答案 1 :(得分:1)
如果你想在这里使用替代解决方案
.story_shape {
width: 15rem;
height: 15rem;
-webkit-shape-outside: circle(50% at 50% 50%);
shape-outside: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
position: relative;
}
.story_img {
height: 100%;
transform: translateX(-4rem);
backface-visibility: hidden;
}
.story_caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-transform: uppercase;
font-size: 1.7rem;
text-align: center;
backface-visibility: hidden;
}
&#13;
<figure class="story_shape">
<img src="https://orig00.deviantart.net/6afd/f/2015/182/4/f/croatia_nature_pack___sample__1___proref_org_by_proref-d8zgqmh.jpg" alt="person on a tour" class="story_img">
<figcaption class="story_caption">mary smith</figcaption>
</figure>
&#13;