Question

我有CSS叠加问题。我正在为一个狗饲养员制作一个网站，我想制作一个带有雄性和雌性狗的旋转木马。所以我的想法是在旋转木马的一张幻灯片上放置3只雄性狗的圆形图像，在另一张幻灯片上放置3只雌性狗。我的所有图像都是1000x1000，因此它们在边界半径50％上给出了一个完美的圆形。

在图像的叠加层上，应该有80％的透明背景，并在图像上显示狗的名字和谱系。但是我的代码不能正常工作，所以请帮助：）

这是我的图片HTML的一部分：

<article>
  <h2>Naši psi</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <div class="carousel-inner">
    <div class="item active kontejner">
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <img class="slika_psa" src="slika_pas.jpg"/>
        <div class="info">
          <a href="#"><h3>Sass Crveni Mayestoso</h3></a>
        </div>
      </div>
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <img class="slika_psa" src="slika_pas3.jpg"/>
      </div>
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <img class="slika_psa" src="slika_pas2.jpg"/>
      </div>
          <h3 class="spol">Mužjaci</h3>
    </div>

    <div class="item kontejner">
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <img class="slika_psa" src="slika_pas.jpg"/>
      </div>
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <img class="slika_psa" src="slika_pas3.jpg"/>
      </div>
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <img class="slika_psa" src="slika_pas2.jpg"/>
      </div>
          <h3>Mužjaci</h3>
    </div>

    <br><br>
      <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
  </ol>


  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</article>

CSS的一部分：

.kontejner {width: 90%;
    margin: 25px auto;}

.slika_psa {
    width: 80%;
    border: 16px solid #fff;
    border-radius: 50%;
    background-color: #1c1c1c;
    overflow: hidden;
}

.info {position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
  transition: .5s ease;
  background-color: #008CBA;
    }

.slika_psa:hover .info {visibility: visible;}

.carousel-inner {height: 100%;}


article {display: table;
    width: 100%;
    height: 100vh;
    margin-top: 50px;
    background-image: url('background..jpg');}

我无法弄清楚如何制作完美的圆形叠加......任何帮助都会得到赞赏。

圆形图像上的CSS叠加

0 个答案: