如何创建一个与css重叠的圆和一个条形？ [英] How to create a circle and a bar that overlap with 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; //问题：不响应。这个块应该从图像开始正好一半。 
 width：100％; 
} 
 .text-bar p {
 left：250 px; 
} 
  

解决方案

$ c> figure 和 figcaption 来构造您的HTML。

Inline-block ， vertical-align 和 margin / p>

  figure {margin-left：50px; / * half image width * / background：black; box-shadow：0 0 1px; border-radius：3px; } img {border-radius：100％; position：relative; / *把它放在前面，可以触发z-index太* / box-shadow：-1px 0 1px，1px 0 1px white; / * whatever U like * / vertical-align：middle; right：50px; / *从真实位置视觉移动* / margin-right：-40px; / *拉或推文本旁边* /} figcaption {display：inline-block; vertical-align：middle;颜色：白色; } p {margin：0; }  

 < figure& < img src =http://lorempixel.com/100/100/people/9/> < figcaption> < p>一些文字在这里离图片10px< / p> < p>和更多< / p> < / figcaption> < / figure>  

For a user profile I'm trying to create a circular image plus a horizontal bar with the same height as the image. Also, it should be responsive. It should look as in the image below. In the black bar there will be text.

Could someone please help me with the correct CSS?
So far I have the code below but this already goes wrong in that the black bar is below the circle and not next to it. But also I don't know how to make the black bar start exactly in the middle of the image, to have the image on top, and to have text in the black bar start sufficiently to the right (while being responsive to screen size).

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

In my CSS file:

.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;
}

解决方案

you could use figure and figcaption to structure your html.

Inline-block, vertical-align and margin to set image aside text

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重叠的圆和一个条形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！