背景溢出和CSS色带

Question

在申请正在进行的申请之前，我正在尝试一些奇特的CSS效果，我遇到了Ribbons。

本身，它完美地工作，但我不会使用生成器建议的固定元素，所以我在主盒中添加了一个图像

但是，我将添加此功能的应用程序的图像尺寸不同，所以我决定更改CSS背景图像的旧update the_table set the_column_to_update = t.rn from ( select the_primary_key_column, row_number() over (order by the_primary_key_column) as rn from x ) t where t.the_primary_key_column = x.the_primary_key_column; ，然后使用{{1属性。

但有时背景图片溢出了盒子的尺寸。只需在 #preview 中添加<img>即可解决问题，但如果我这样做，功能区的“曲线”就会消失。

我怎么能改变它？这是当前的测试代码，虽然由于某种原因背景没有加载，不是在这里也不是在JSFiddle中。

background-size

overflow: hidden

图片转到#preview { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 3px solid #000; display: block; /*overflow: hidden;*/ perspective: 1000px; position: relative; height: 260px; width: 365px; } .front { background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' ); } .ribbon { position: absolute; left: -5px; top: -5px; z-index: 1; overflow: hidden; width: 75px; height: 75px; text-align: right; } .ribbon span { font-size: 10px; font-weight: bold; color: #FFF; text-transform: uppercase; text-align: center; line-height: 20px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); width: 100px; display: block; background: #79A70A; background: linear-gradient(#F70505 0%, #8F0808 100%); box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); position: absolute; top: 19px; left: -21px; } .ribbon span::before { content: ""; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #8F0808; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #8F0808; } .ribbon span::after { content: ""; position: absolute; right: 0px; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid #8F0808; border-bottom: 3px solid transparent; border-top: 3px solid #8F0808; }，因为我还打算使用已经并行工作的David Walsh's Card Fliping technique，我认为这与案例无关。

即使将<div id="preview"> <div class="ribbon"> <span>POPULAR</span> </div> <div class="front"></div> </div>设置为.front也会使图像溢出，但此值不可取，因为它不会像currentlt定义的值那样覆盖。

Answer 1

.front只是一个文本容器。您需要将背景图像应用于#preview

#preview {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  border: 3px solid #000;
  display: block;
  /*overflow: hidden;*/
  perspective: 1000px;
  position: relative;
  height: 260px;
  width: 365px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' );
}

  .front {
    color: white;
  }

.ribbon {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#F70505 0%, #8F0808 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F0808;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F0808;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F0808;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F0808;
}

<div id="preview">

  <div class="ribbon">
    <span>POPULAR</span>
  </div>
  
  <div class="front">FRONT DIV Lorem ipsum la-la-la</div>
  
</div>

或者您需要为.front定义宽度和高度：

#preview {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  border: 3px solid #000;
  display: block;
  /*overflow: hidden;*/
  perspective: 1000px;
  position: relative;
  height: 260px;
  width: 365px;
}

  .front {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' );
   height: 260px;
  width: 365px;
 }

.ribbon {
  position: absolute;
  left: -8px; top: -8px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#F70505 0%, #8F0808 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F0808;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F0808;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F0808;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F0808;
}

<div id="preview">

  <div class="ribbon">
    <span>POPULAR</span>
  </div>
  
  <div class="front"></div>
  
</div>