如何在不使用CSS中断布局的情况下隐藏图像

问题描述 投票:0回答:1

我已经在图像上使用自定义CSS实现了此设计。我必须显示四类细节。我已经实现了编程,但是在垂直对齐它们时遇到了问题。

我未对图片应用任何显示,但是在询问时布局会暂停,并且当我将图像不透明度设置为0%时,图像仍然存在。

Here Is my code:

.main-box{
        padding: 1rem;
        display: inline-block;
        width: 100%;
    min-width: 130px;
    max-width: 130px;
    display: inline-block;
    border: 1px solid #000;
    height: 150px;
   max-height: 150px;
    }
    .main-box img{
        width: 30%;
        border-radius:50%;
        display:block;
    margin:auto;
    }
    .main-box p,a{
        text-align: center;
    }
    .main-box a{
        display: block;
    }
    .show{
        opacity: 0;
    }
    .main-box:hover img{
        opacity: 0;
    }

    .main-box:hover .show{
        opacity: 1;
    }
    .main-box:hover {
        background:url(https://ui-avatars.com/api/?background=0D8ABC&color=fff);
        background-size: cover;
        background-repeat: no-repeat;
    }
<div class="main-box">
        <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
        <div class="show-info">
        <p>name</p>
        <p>batch</p>
    </div>
        <div class="show">
            <p>join</p>
            <a href="#">profile</a>
        </div>
    </div>
     <div class="main-box">
        <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
        <div class="show-info">
        <p>name</p>
        <p>batch</p>
    </div>
        <div class="show">
            <p>join</p>
            <a href="#">profile</a>
        </div>
    </div>
     <div class="main-box">
        <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
        <div class="show-info">
        <p>name</p>
        <p>batch</p>
    </div>
        <div class="show">
            <p>join</p>
            <a href="#">profile</a>
        </div>
    </div>
     <div class="main-box">
        <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
        <div class="show-info">
        <p>name</p>
        <p>batch</p>
    </div>
        <div class="show">
            <p>join</p>
            <a href="#">profile</a>
        </div>
    </div>
     <div class="main-box">
        <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
        <div class="show-info">
        <p>name</p>
        <p>batch</p>
    </div>
        <div class="show">
            <p>join</p>
            <a href="#">profile</a>
        </div>
    </div>
     <div class="main-box">
        <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
        <div class="show-info">
        <p>name</p>
        <p>batch</p>
    </div>
        <div class="show">
            <p>join</p>
            <a href="#">profile</a>
        </div>
    </div>
     <div class="main-box">
        <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
        <div class="show-info">
        <p>name</p>
        <p>batch</p>
    </div>
        <div class="show">
            <p>join</p>
            <a href="#">profile</a>
        </div>
    </div>
     <div class="main-box">
        <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
        <div class="show-info">
        <p>name</p>
        <p>batch</p>
    </div>
        <div class="show">
            <p>join</p>
            <a href="#">profile</a>
        </div>
    </div>
     <div class="main-box">
        <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
        <div class="show-info">
        <p>name</p>
        <p>batch</p>
    </div>
        <div class="show">
            <p>join</p>
            <a href="#">profile</a>
        </div>
    </div>
     <div class="main-box">
        <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff"/>
        <div class="show-info">
        <p>name</p>
        <p>batch</p>
    </div>
        <div class="show">
            <p>join</p>
            <a href="#">profile</a>
        </div>
    </div>
html css
1个回答
0
投票

思考我了解您的要求-尝试将.show CSS更改为display: none

opacity属性仅会更改多少元素在呈现时的可见性-但其在页面上的“足迹”将保留。

如果改为使用display: none; CSS,则将忽略DOM中元素的“足迹”。

见下文:

.show {
  display: none;
}

您还希望在<div>元素周围包含包装器.main-box,以便您可以设置框集合的行为。我刚刚添加了具有以下CSS行为的<div class="main">

.main {
  display: flex;
  flex-flow: wrap;
}

对于网格情况,您将受益于采用基于Flexbox的方法-有关更多信息,请参见W3Schools page-祝您好运!

.main {
  display: flex;
  flex-flow: wrap;
}

.main-box {
  margin: .5rem .5rem;
  padding: 1rem;
  display: inline-block;
  width: 100%;
  min-width: 130px;
  max-width: 130px;
  display: inline-block;
  border: 1px solid #000;
  height: 150px;
  max-height: 150px;
}

.main-box img {
  width: 30%;
  border-radius: 50%;
  display: block;
  margin: auto;
}

.main-box p,
a {
  text-align: center;
}

.main-box a {
  display: block;
}

.show {
  opacity: 0;
}

.main-box:hover img {
  opacity: 0;
  display: none;
}

.main-box:hover .show {
  opacity: 1;
}

.main-box:hover {
  background: url(https://ui-avatars.com/api/?background=0D8ABC&color=fff);
  background-size: cover;
  background-repeat: no-repeat;
}
<div class="main">
  <div class="main-box">
    <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
    <div class="show-info">
      <p>name</p>
      <p>batch</p>
    </div>
    <div class="show">
      <p>join</p>
      <a href="#">profile</a>
    </div>
  </div>
  <div class="main-box">
    <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
    <div class="show-info">
      <p>name</p>
      <p>batch</p>
    </div>
    <div class="show">
      <p>join</p>
      <a href="#">profile</a>
    </div>
  </div>
  <div class="main-box">
    <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
    <div class="show-info">
      <p>name</p>
      <p>batch</p>
    </div>
    <div class="show">
      <p>join</p>
      <a href="#">profile</a>
    </div>
  </div>
  <div class="main-box">
    <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
    <div class="show-info">
      <p>name</p>
      <p>batch</p>
    </div>
    <div class="show">
      <p>join</p>
      <a href="#">profile</a>
    </div>
  </div>
  <div class="main-box">
    <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
    <div class="show-info">
      <p>name</p>
      <p>batch</p>
    </div>
    <div class="show">
      <p>join</p>
      <a href="#">profile</a>
    </div>
  </div>
  <div class="main-box">
    <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
    <div class="show-info">
      <p>name</p>
      <p>batch</p>
    </div>
    <div class="show">
      <p>join</p>
      <a href="#">profile</a>
    </div>
  </div>
  <div class="main-box">
    <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
    <div class="show-info">
      <p>name</p>
      <p>batch</p>
    </div>
    <div class="show">
      <p>join</p>
      <a href="#">profile</a>
    </div>
  </div>
  <div class="main-box">
    <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
    <div class="show-info">
      <p>name</p>
      <p>batch</p>
    </div>
    <div class="show">
      <p>join</p>
      <a href="#">profile</a>
    </div>
  </div>
  <div class="main-box">
    <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
    <div class="show-info">
      <p>name</p>
      <p>batch</p>
    </div>
    <div class="show">
      <p>join</p>
      <a href="#">profile</a>
    </div>
  </div>
  <div class="main-box">
    <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" />
    <div class="show-info">
      <p>name</p>
      <p>batch</p>
    </div>
    <div class="show">
      <p>join</p>
      <a href="#">profile</a>
    </div>
  </div>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.