背景溢出和 CSS 色带

Question

在应用于正在进行的应用程序之前，我正在试验一些奇特的 CSS 效果，我遇到了 Ribbons。

就其本身而言，它工作得很好，但我不会按照生成器的建议使用固定元素，所以我在主框中添加了一个图像

但是，我要添加此功能的应用程序的图像大小还不一样，所以我决定将旧的 <img> 更改为 CSS 背景图像，然后利用 background-size 属性.

但有时背景图像会溢出框的尺寸。只需在 #preview 中添加一个 overflow: hidden 即可解决所有问题，但如果我这样做，功能区的 "curves" 就会消失。

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

#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;
}

<div id="preview">

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

图像转到.front，因为我也打算使用David Walsh's Card Fliping technique，它已经在并行工作，我认为与案例无关。

即使将 background-size 设置为 contain 也会使图像溢出，但这个值并不理想，因为它不会像当前定义的值那样覆盖。

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>

背景溢出和 CSS 色带

Background Overflow and CSS Ribbons

css

background-image