如何在 CSS 中围绕文本创建椭圆？答案

【问题标题】：How do I create an oval around text in CSS?如何在 CSS 中围绕文本创建椭圆？
【发布时间】：2016-09-28 20:24:32
【问题描述】：

我需要使用 css 创建下面的图像。
但这就是我得到的
每次您将鼠标悬停在图像上时，叠加层都会消失，我已经这样做了。
但是中间的图像包含带有椭圆的文本（立即购买），我无法正确定位椭圆。

这是我的小提琴： https://jsfiddle.net/9f6xat3f/1/

这是我拥有的一些 CSS：

.trending-button1{  
    border-radius: 25px;
    border: 3px solid #fff;
    padding: 20px;
    width: 200px;
    height: 50px;
    }

    /*banner overlay*/
    div.homepage-popular-categories {
      position: relative;
      display: inline-block;
    }

    div.homepage-popular-categories p {
      margin: 0;
      /*display: block;*/
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      color: #eeeeec;
      background: rgba(0,0,0,0.5);
      transition: opacity 0.5s;
      opacity: 1;
      text-align: center;
      font-family: sans-serif;
      font-size: 1.2em;
      font-weight: bold;
    }

    div.homepage-popular-categories p:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
    div.homepage-popular-categories p:hover {
      background: rgba(0,0,0,0);
    }
    /*end banner overlay*/


    .new-arrivals{  
      background:url('https://s-media-cache-ak0.pinimg.com/originals/4f/a9/d1/4fa9d18c567a8c5a05997a9773685361.jpg') no-repeat; 
      width:313px;  
      height:313px;
    }

    .trending{
      background:url('http://socialmediaoutcomes.com/go/wp-content/uploads/2013/08/successful-business-people-smiling.jpg') no-repeat;  
      width:313px;  
      height:313px;

    }

    .shop-by-goal{
      background:url('https://brianpshea.files.wordpress.com/2013/06/4234255-group-of-business-people-smiling-together-in-an-office.jpg') no-repeat;    
      width:313px;  
      height:313px;

    }


    .strov-3-banners{   
        margin-top:15px;    
        text-align: center; 
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box;    
        -ms-box-sizing: border-box; 
        -o-box-sizing: border-box;    
        box-sizing: border-box;    
        padding:10px 0;
    }

如何正确定位椭圆？

【问题讨论】：

你要找的是如何垂直对齐多行文本。
“圆形椭圆”是矛盾的。像一个“方形矩形”
@j08691 你说得对，没注意。
您的身高规则中缺少“px”
@JordanBarber 我注意到了，我修好了。但它仍然不会居中，并且覆盖也关闭了。 jsfiddle.net/9f6xat3f/1

标签： html css hover overlay

【解决方案1】：

只需对div.homepage-popular-categories p 选择器进行一些修改。

div.homepage-popular-categories p {
    position: absolute;
    color: #eeeeec;
    background: rgba(0,0,0,0.5);
    transition: .5s;
    opacity: 1;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    top: 0;
    bottom: 0;
    max-height: 20px;
    margin: auto;
    left: 0;
    right: 0;
}

重新对齐按钮：

.trending-button1{	
border-radius: 25px;
border: 3px solid #fff;
padding: 20px;
width: 200px;
height: 50;
}

/*banner overlay*/
div.homepage-popular-categories {
  position: relative;
  display: inline-block;
}

div.homepage-popular-categories p {
    position: absolute;
    color: #eeeeec;
    background: rgba(0,0,0,0.5);
    transition: .5s;
    opacity: 1;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    top: 0;
    bottom: 0;
    max-height: 20px;
    margin: auto;
    left: 0;
    right: 0;
}

div.homepage-popular-categories p:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
div.homepage-popular-categories p:hover {
  background: rgba(0,0,0,0);
}
/*end banner overlay*/


.new-arrivals{	
  background:url('https://s-media-cache-ak0.pinimg.com/originals/4f/a9/d1/4fa9d18c567a8c5a05997a9773685361.jpg') no-repeat;	
  width:313px;	
  height:313px;
}

.trending{
  background:url('http://socialmediaoutcomes.com/go/wp-content/uploads/2013/08/successful-business-people-smiling.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}

.shop-by-goal{
  background:url('https://brianpshea.files.wordpress.com/2013/06/4234255-group-of-business-people-smiling-together-in-an-office.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}


.strov-3-banners{	
	margin-top:15px;	
	text-align: center;	
	-webkit-box-sizing: border-box;	
	-moz-box-sizing: border-box;	
	-ms-box-sizing: border-box;	
	-o-box-sizing: border-box;    
	box-sizing: border-box;    
	padding:10px 0;
}

<a href="#">
  <div class="grid12-4 banner strov-3-banners shop-by-goal homepage-popular-categories ">
    <p>SHOP BY GOAL</p>
  </div>
</a>

<a href="#">
  <div class="grid12-4 banner strov-3-banners trending homepage-popular-categories ">
    <p>Shop Now</p>
    <p class="trending-button1">TRENDING </p>
  </div>
</a>


<a href="#">
  <div class="grid12-4 banner strov-3-banners new-arrivals homepage-popular-categories ">
    <p>NEW ARRIVALS</p>
  </div>
</a>

更新小提琴： https://jsfiddle.net/vct6dsu6/13/

全覆盖覆盖代码 sn-p 示例：

div.homepage-popular-categories .trending-button1 {
    border-radius: 25px;
    border: 3px solid #fff;
    padding: 20px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-height: 65px;
    margin: auto;
    box-sizing: border-box;
    max-width: 200px;
}

/*banner overlay*/
div.homepage-popular-categories {
  position: relative;
  display: inline-block;
}

div.homepage-popular-categories p {
    position: absolute;
    color: #eeeeec;
    background: rgba(0,0,0,0.5);
    transition: .5s;
    opacity: 1;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    top: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
}

div.homepage-popular-categories p:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
div.homepage-popular-categories:hover p {
    background: rgba(0,0,0,0);
}
/*end banner overlay*/


.new-arrivals{	
  background:url('https://s-media-cache-ak0.pinimg.com/originals/4f/a9/d1/4fa9d18c567a8c5a05997a9773685361.jpg') no-repeat;	
  width:313px;	
  height:313px;
}

.trending{
  background:url('http://socialmediaoutcomes.com/go/wp-content/uploads/2013/08/successful-business-people-smiling.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}

.shop-by-goal{
  background:url('https://brianpshea.files.wordpress.com/2013/06/4234255-group-of-business-people-smiling-together-in-an-office.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}


.strov-3-banners{	
	margin-top:15px;	
	text-align: center;	
	-webkit-box-sizing: border-box;	
	-moz-box-sizing: border-box;	
	-ms-box-sizing: border-box;	
	-o-box-sizing: border-box;    
	box-sizing: border-box;    
	padding:10px 0;
}

<a href="#">
  <div class="grid12-4 banner strov-3-banners shop-by-goal homepage-popular-categories ">
    <p>SHOP BY GOAL</p>
  </div>
</a>

<a href="#">
  <div class="grid12-4 banner strov-3-banners trending homepage-popular-categories ">
    <p>Shop Now</p>
    <p class="trending-button1">TRENDING </p>
  </div>
</a>


<a href="#">
  <div class="grid12-4 banner strov-3-banners new-arrivals homepage-popular-categories ">
    <p>NEW ARRIVALS</p>
  </div>
</a>

我不完全确定您打算对悬停效果做什么，所以我将把它留给您来完善，但下面的 sn-p 将提供一些示例供您考虑。

叠加悬停效果

显示并删除替代悬停演示。

div.homepage-popular-categories .trending-button1 {
    border-radius: 25px;
    border: 3px solid #fff;
    padding: 20px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-height: 65px;
    margin: auto;
    box-sizing: border-box;
    max-width: 200px;
    background: transparent;
}

/*banner overlay*/
div.homepage-popular-categories {
  position: relative;
  display: inline-block;
}

div.homepage-popular-categories p {
    position: absolute;
    color: #eeeeec;
    background: rgba(0,0,0,0.5);
    transition: .5s;
    opacity: 1;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    top: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
}

div.homepage-popular-categories p:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
div.homepage-popular-categories:hover p {
    background: rgba(0,0,0,0);
}
/*end banner overlay*/


.new-arrivals{	
  background:url('https://s-media-cache-ak0.pinimg.com/originals/4f/a9/d1/4fa9d18c567a8c5a05997a9773685361.jpg') no-repeat;	
  width:313px;	
  height:313px;
}

.trending{
  background:url('http://socialmediaoutcomes.com/go/wp-content/uploads/2013/08/successful-business-people-smiling.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}

.shop-by-goal{
  background:url('https://brianpshea.files.wordpress.com/2013/06/4234255-group-of-business-people-smiling-together-in-an-office.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}


.strov-3-banners{	
	margin-top:15px;	
	text-align: center;	
	-webkit-box-sizing: border-box;	
	-moz-box-sizing: border-box;	
	-ms-box-sizing: border-box;	
	-o-box-sizing: border-box;    
	box-sizing: border-box;    
	padding:10px 0;
}

/* On Hover Overlay Remove */
div.homepage-popular-categories.overlay-remove .trending-button1 {
    margin-bottom: 50px;
}

div.homepage-popular-categories.overlay-remove:hover .trending-button1 {
    margin-bottom: -150px;
}

div.homepage-popular-categories.overlay-remove {
    overflow: hidden;
}

div.homepage-popular-categories.overlay-remove:hover p {
    color: transparent;
}

/* On Hover Overlay Reveal */
div.homepage-popular-categories.overlay-reveal:hover p {
    background: rgba(0,0,0,0.5);
    color: #eeeeec;
}

div.homepage-popular-categories.overlay-reveal p {
    position: absolute;
    color: transparent;
    background: rgba(0,0,0,0);
    transition: .5s;
    opacity: 1;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    top: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
}

div.homepage-popular-categories.overlay-reveal .trending-button1 {
    border-radius: 25px;
    border: 3px solid #fff;
    padding: 20px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-height: 65px;
    margin: auto;
    box-sizing: border-box;
    max-width: 200px;
    margin-bottom: -150px;
}

div.homepage-popular-categories.overlay-reveal:hover .trending-button1 {
    margin-bottom: 50px;
    background: transparent;
}

div.homepage-popular-categories.overlay-reveal {
    overflow: hidden;
}

<h2>Overlay Remove</h2>
<a href="#">
  <div class="grid12-4 banner strov-3-banners shop-by-goal homepage-popular-categories overlay-remove">
    <p>SHOP BY GOAL</p>
  </div>
</a>

<a href="#">
  <div class="grid12-4 banner strov-3-banners trending homepage-popular-categories overlay-remove">
    <p>Shop Now</p>
    <p class="trending-button1">TRENDING </p>
  </div>
</a>


<a href="#">
  <div class="grid12-4 banner strov-3-banners new-arrivals homepage-popular-categories overlay-remove">
    <p>NEW ARRIVALS</p>
  </div>
</a>

<hr>
<h2>Overlay Reveal</h2>
<a href="#">
  <div class="grid12-4 banner strov-3-banners shop-by-goal homepage-popular-categories overlay-reveal">
    <p>SHOP BY GOAL</p>
  </div>
</a>

<a href="#">
  <div class="grid12-4 banner strov-3-banners trending homepage-popular-categories overlay-reveal">
    <p>Shop Now</p>
    <p class="trending-button1">TRENDING </p>
  </div>
</a>


<a href="#">
  <div class="grid12-4 banner strov-3-banners new-arrivals homepage-popular-categories overlay-reveal">
    <p>NEW ARRIVALS</p>
  </div>
</a>

【讨论】：

谢谢，这看起来确实不错，但是当您将鼠标悬停在图像上时，覆盖层应该会完全消失。在“全覆盖覆盖代码 sn-p 示例”中，您提供的椭圆仍然包含覆盖。
很高兴它有帮助。如果您还需要解决悬停问题，则应在原始问题中以及预期的最终结果中提及它。最初您的问题是特别是按钮的对齐问题。
如果您还需要按钮在悬停时消失的不透明背景，最好以不同的方式指定:hover 规则。例如：div.homepage-popular-categories:hover p { background: rgba(0,0,0,0); }“全覆盖覆盖代码 sn-p 示例”也已更新以演示这一点。
The Shop Now 文本仍然位于 TRENDING 文本之上。而且 Shop Now 还添加了一个覆盖层，使它看起来比 div 的其余部分更暗。
添加了覆盖悬停效果以交替显示或隐藏覆盖。请注意，您可以通过分别调整顶部或底部边距来垂直定位按钮；例如，如果您需要按钮出现在文本上方，请使用 margin-top 来表示自然和悬停状态，而不是 margin-bottom。

【解决方案2】：

这会改变你的盒子的高度并使其居中对齐

    .trending-button1{  
    border-radius: 25px;
    border: 3px solid #fff;
    padding: 20px;
    width: 200px;
    max-height: 20px;
    margin:0 auto;
    }

【讨论】：

谢谢，这确实有帮助，但我现在的商店仍然没有居中，而且覆盖也关闭了 jsfiddle.net/9f6xat3f/1

【解决方案3】：

我对 css 做了一些更改，但你可以做更多。为什么你将高度为 313 和宽度为 313 的框设置为三倍，只需添加一个具有相同 css 属性的类。

.box { width:313px;height:313px;}

看看这个来自你的 jsfiddle。

我重置了悬停时的动画，但你可以把它放回去。

Look at this Jsfiddle

【讨论】：