如何隱藏CSS內容以防溢出

Question

我如何隱藏css內容以防溢出。.我想在該css元素中顯示價格標簽，但它是從我的卡中取出的。

 .content{ content:''; position: absolute; left: 309px; top: 206px; z-index: 1; border-radius: 100%; width: 160px; height: 160px; //overflow: hidden; //display: block; background: rgba(0,0,0,.5) } 

 <div class="row"> <div class="col s12 l4"> <div class="card"> <div class="card-image"> <img src="http://lorempixel.com/300/400" style="height: 300px;width: 418px;"> <div class="content"> </div> </div> </div> </div> 

Answer 1

溢出的div的position:absolute 。 因此，您必須將其直接父級（ .card-image ）設置為position:relative以便將“絕對”定位的div作為子級“捕獲”。

然后應用overflow: hidden到容器中。

 .card-image { position: relative; overflow: hidden; width: 418px; height : 300px; } 

 <div class="row"> <div class="col s12 l4"> <div class="card"> <div class="card-image"> <img src="assets/img/jonatan-pie-415847.jpg" style="height: 300px;width: 418px;"> <div style="content:''; position: absolute; left: 309px; top: 206px; z-index: 1; border-radius: 100%; width: 160px; height: 160px; background: rgba(0,0,0,.5);"> </div> </div> </div> </div> 

Answer 2

 <div class="row">
  <div class="col s12 l4">
    <div class="card">
      <div class="card-image">
        <img src="assets/img/jonatan-pie-415847.jpg" style="height: 300px;width: 418px;">
        <div style="content:'';
                  position: absolute;
                  left: 309px;
                  top: 206px;
                  z-index: 1;
                  border-radius: 100%;
                  width: 160px;
                  height: 160px;
                  overflow: hidden;
                  display:block
                  background: rgba(0,0,0,.5);">
        </div>
      </div>
    </div>
  </div>

語法：溢出：可見|隱藏|滾動|自動|初始|繼承； 看看https://www.w3schools.com/cssref/pr_pos_overflow.asp

Answer 3

 <div class="row"> <div class="col s12 l4"> <div class="card"> <div class="card-image" style="position:relative; overflow:hidden;height: 300px;width: 418px;"> <img src="assets/img/jonatan-pie-415847.jpg" style="height: 300px;width: 418px;"> <div style="content:''; position: absolute; left: 309px; top: 206px; z-index: 1; border-radius: 100%; width: 160px; height: 160px; background: rgba(0,0,0,.5);"> </div> </div> </div> </div> 

不確定這是否是您想要的。 重要的一件事是使card-image相對放置，然后可以將其用作參考點而不是窗口。 然后，必須對其應用溢出來隱藏內容，因為它是內容所在的容器。

您的圖片對我來說很破，還不清楚您想要什么。

最好將卡片圖像與背景圖像一起使用，然后在其中添加圓作為常規內容。

 .card-image{ background-repeat: no-repeat; background-size: cover; position:relative; overflow:hidden; height: 300px; width: 418px; } .price-wrapper{ position: absolute; box-sizing: border-box; left: 309px; top: 206px; border-radius: 100%; width: 160px; height: 160px; background: rgba(0,0,0,.5); padding: 50px; color: #FFF; } 

 <div class="row"> <div class="col s12 l4"> <div class="card"> <div class="card-image" style="background-image: url('assets/img/jonatan-pie-415847.jpg')" > <div class="price-wrapper" > $9.99 </div> </div> </div> </div> 

這將使您對圈子中的內容有更多的控制。 我將背景圖像保留為內聯樣式，通過這種方式，您可以使用PHP代碼或您擁有的內容進行更改。

我在其中添加了一些“天賦”，以便可以在其中輸入實際的價格值，不確定是否需要，但我為此添加了box-sizing和color 。

只是一個想法。