如何创建与 css 重叠的圆和条？

Question

对于用户个人资料，我正在尝试创建一个圆形图像加上一个与图像高度相同的水平条。此外，它应该是响应式的。它应该如下图所示。黑条中会有文字。

有人能帮我解决一下 CSS 吗？
到目前为止，我有下面的代码，但这已经出错了，因为黑色条形图位于圆圈下方而不是旁边。但我也不知道如何使黑条正好从图像中间开始，使图像位于顶部，并使黑条中的文本充分向右开始（同时响应屏幕尺寸） .

<div class="col-md-12 profile-topbar">
  <div class="round">
    <img src=<%= image_path('profile.gif') %>>
  </div>
  <div class="text-bar">
    ...
  </div>
</div>

在我的 CSS 文件中：

.round {
  margin: 2em;
  border-radius: 50%;
  overflow: hidden;
  width: 150px;
  height: 150px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
.round img {
  display: block;
  width: 100%;
  height: 100%;
}

.text-bar {
  display: inline-block;
  background: #FFF;
  left: 222px; //Problem: not responsive. This block should start exactly halfway from the image.
  width: 100%;
}
.text-bar p {
  left: 250 px;
}

Answer 1

思路是——（1）容器上设置margin-left:50px，里面的头像设置margin-left:-50px。 (2) 将bio设置为table，这样我们就可以使用垂直对齐功能将文本居中。

JSFIDDLE DEMO

body {
    background: silver;
}
.user {
    height: 100px;
    background: #222;
    margin-left: 50px;
}
.avatar {
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    margin-left: -50px;
}
.bio {
    display: table;
    height: 100px;
    color: #fff;
}
.bio p {
    display: table-cell;
    vertical-align: middle;
    padding-left: 10px;
    margin: 0;
}

<div class="user">
    <img class="avatar" src="http://i.imgur.com/9pnkFjf.jpg" />
    <div class="bio"><p>John Doe is an anonymous character.</p></div>
</div>

Answer 2

您忘记绝对定位标题栏。

http://codepen.io/fontophilic/pen/LVzbVM?editors=110

我在笔中使用 SCSS，但这里是编译后的 css:

.round {
  margin: 2em;
  overflow: hidden;
  width: 150px;
  height: 150px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

.round img {
  display: block;
  width: 100%;
  height: 100%;
}

.text-bar {
  display: block;
  margin: 2em;
  position: absolute;
  background-color: #000;
  left: 75px;
  top: 0;
  width: 100%;
  height: 150px;
  z-index: -1;
}

.text-bar p {
  position: relative;
  left: 75px;
  color: white;
}

Answer 3

<div class="circle">
</div>


html,body{
  width:100%;
  height:100%;
 }
.circle{
 border-radius:50%;
 width:3em;
 height:3em;
 background-color: red;
 }
.circle:before{
margin-left: 1.5em;
content: " ";
display: block;
position: relative;
background: black;
height: 3em;
width: 500%;
z-index:-1;
}

http://codepen.io/sajrashid/pen/yNzVJz

Answer 4

您可以使用 figure 和 figcaption 来构建您的 html。

Inline-block、vertical-align 和 margin 将图像放在一边文本

figure {
  margin-left:50px;/* half image width */
  background:black;
  box-shadow:0 0 1px;
  border-radius:3px;
  }
img {
  border-radius:100%;
  position:relative;/* brings it at front, can trigger z-index too */
  box-shadow:-1px 0 1px, 1px 0 1px white ;/* whatever U like */
  vertical-align:middle;
  right:50px;/* move visually from real position */
  margin-right:-40px;/* pull or push text aside */
  }
figcaption {
  display:inline-block;
  vertical-align:middle;
  color:white;
  }
p {
  margin:0;
  }

<figure>
  <img src="http://lorempixel.com/100/100/people/9" />
  <figcaption>
    <p>some text here  10px away from image</p>
    <p>and more</p>
    </figcaption>
  </figure>

如何创建与 css 重叠的圆和条？

How to create a circle and a bar that overlap with css?

html

css

css-shapes