溢出：隐藏-是否有任何方法可以使特定孩子可见？

时间：2020-02-18 23:19:06

标签： html css

我需要用灰色的半圆形包括引号，这样它才是正确的高度，但是我还需要那条线能够从其容器中溢出。

.CONTAINER {
  width: 70%;
  position: relative;
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 25%;
  margin-bottom: -10px;
  overflow: hidden;
}

.halfCircle {
  max-width: 100%;
  background: darkgray;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  border-bottom: 0;
  text-align: center;
  overflow: visible;
  margin-bottom: -10px;
}

#QUOTE22 {
  text-align: center;
  margin-top: -32px;
  font-size: 1.3em;
  letter-spacing: 2px;
  font-weight: 30;
}

#PLogo {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  height: 200px;
  width: 200px;
}

#FrontQuote {
  height: 1.3em;
  width: 1.3em;
  position: relative;
  right: -5px;
}

#QUOTE {
  text-align: center;
  line-height: 100%;
  letter-spacing: 1px;
  font-size: 1.3em;
}

#QUOTE12 {
  text-align: center;
  line-height: 100%;
  letter-spacing: 0px;
  font-size: 1.3em;
  margin-top: 10px;
  z-index: 100;
  overflow: visible;
}

#BackQuote {
  height: 1.7em;
  width: 1.7em;
  transform: rotate(180deg);
  z-index: 100;
  overflow: visible;
}

#stock1 {
  position: absolute;
  margin-top: -52.5px;
  margin-left: -8px;
  width: 101.5vw;
  height: auto;
  max-height: 500px;
  filter: grayscale(1);
  opacity: .5;
  background: #121212;
  z-index: -1;
}
<div class="CONTAINER">
  <div class="halfCircle">
    <img id="PLogo" src="https://static.wixstatic.com/media/058e45_e590acfd22c440f4b5c89450738f321d~mv2.png/v1/fill/w_438,h_438,al_c,q_85,usm_0.66_1.00_0.01/058e45_e590acfd22c440f4b5c89450738f321d~mv2.webp">
    <p id="QUOTE12"><img id="FrontQuote" src="https://static.wixstatic.com/media/058e45_df55c46642a94f489cf76fa18cc13cb8~mv2.png/v1/fill/w_50,h_50,al_c,q_85,usm_0.66_1.00_0.01/Logo%20Quotes.webp"> WHAT WE LEARN WITH PLEASURE, WE NEVER FORGET

      <sub><sub><img id="BackQuote" src="https://static.wixstatic.com/media/058e45_df55c46642a94f489cf76fa18cc13cb8~mv2.png/v1/fill/w_50,h_50,al_c,q_85,usm_0.66_1.00_0.01/Logo%20Quotes.webp"></sub></sub>
    </p>
  </div>
</div>
</section>

<section id="SKILLS">


  <p id="QUOTE22">- ALFRED MERCIER</p>

  <img id="stock1" src="https://media.istockphoto.com/photos/graphic-designer-drawing-on-graphics-tablet-at-workplace-picture-id865230556">

一些其他信息，因为该机器人说我需要更多的单词：

  • 我在另一篇文章中读到有人建议在半圆周围有一个容器，并且那个会被溢出：隐藏起来，这样孩子的孩子就不会受到影响，但是在下面对我没有帮助。

  • 我只希望HTML或CSS答案，因为这是我目前所知道的全部...但是如果没有其他方法，我将尝试其他语言。

  • 我将很难对位置进行太多调整，但是我在某个位置可能存在问题的地方读到另一条评论，因此我尝试从尽可能多的元素中删除位置标签。

1 个答案:

答案 0 :(得分：1)

position:relative;应该放在顶部。如果效率不高，则可以添加一个z-index值。

示例

.CONTAINER {
  width: 70%;
  position: relative;
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 25%;
  margin-bottom: -10px;
  overflow: hidden;
}

.halfCircle {
  max-width: 100%;
  background: darkgray;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  border-bottom: 0;
  text-align: center;
  overflow: visible;
  margin-bottom: -10px;
}

#QUOTE22 {
  text-align: center;
  margin-top: -1em;
  font-size: 1.3em;
  letter-spacing: 2px;
  font-weight: 30;
  position:relative;/* added <====== */
}

#PLogo {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  height: 200px;
  width: 200px;
}

#FrontQuote {
  height: 1.3em;
  width: 1.3em;
  position: relative;
  right: -5px;
}

#QUOTE {
  text-align: center;
  line-height: 100%;
  letter-spacing: 1px;
  font-size: 1.3em;
}

#QUOTE12 {
  text-align: center;
  line-height: 100%;
  letter-spacing: 0px;
  font-size: 1.3em;
  margin-top: 10px;
  z-index: 100;
  overflow: visible;
}

#BackQuote {
  height: 1.7em;
  width: 1.7em;
  transform: rotate(180deg);
  z-index: 100;
  overflow: visible;
}

#stock1 {
  position: absolute;
  margin-top: -52.5px;
  margin-left: -8px;
  width: 101.5vw;
  height: auto;
  max-height: 500px;
  filter: grayscale(1);
  opacity: .5;
  background: #121212;
  z-index: -1;
}
<div class="CONTAINER">
  <div class="halfCircle">
    <img id="PLogo" src="https://static.wixstatic.com/media/058e45_e590acfd22c440f4b5c89450738f321d~mv2.png/v1/fill/w_438,h_438,al_c,q_85,usm_0.66_1.00_0.01/058e45_e590acfd22c440f4b5c89450738f321d~mv2.webp">
    <p id="QUOTE12"><img id="FrontQuote" src="https://static.wixstatic.com/media/058e45_df55c46642a94f489cf76fa18cc13cb8~mv2.png/v1/fill/w_50,h_50,al_c,q_85,usm_0.66_1.00_0.01/Logo%20Quotes.webp"> WHAT WE LEARN WITH PLEASURE, WE NEVER FORGET

      <sub><sub><img id="BackQuote" src="https://static.wixstatic.com/media/058e45_df55c46642a94f489cf76fa18cc13cb8~mv2.png/v1/fill/w_50,h_50,al_c,q_85,usm_0.66_1.00_0.01/Logo%20Quotes.webp"></sub></sub>
    </p>
  </div>
</div>
</section>

<section id="SKILLS">


  <p id="QUOTE22">- ALFRED MERCIER</p>

  <img id="stock1" src="https://media.istockphoto.com/photos/graphic-designer-drawing-on-graphics-tablet-at-workplace-picture-id865230556">

相关问题
最新问题