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

Question

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

这是我的 fiddle： 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;
    }

如何正确定位椭圆？

Answer 1

这会改变您的方框的高度并将其居中对齐

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

Answer 2

只需对 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>

已更新Fiddle: https://jsfiddle.net/vct6dsu6/13/

全覆盖覆盖代码片段示例：

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>

我不完全确定你打算用悬停效果做什么，所以我会把它留给你来完善，但下面的代码片段将提供一些例子来考虑。

叠加悬停效果

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

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>

Answer 3

我对 css 进行了一些更改，但您可以进行更多更改。为什么要将高度为 313 宽度为 313 的框设置为三倍，只需添加具有相同 css 属性的 class。

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

看看这个从你那里分叉出来的 jsfiddle。

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

Look at this Jsfiddle

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

How do I create an oval around text in CSS?

html

css

overlay

hover