剪切影像div中重疊的CSS自定義功能區

您好，我只想剪下重疊的絲帶，使其適合影像 div。

頂部和左側功能區的多余部分可以使其恰好適合 div。（此時此描述變得多余以填充更多文本，因此我可以發布此問題謝謝）

我該怎么做？

.ribbon {
  background-color: #FBBC04;
  overflow: hidden;
  white-space: nowrap;
  /* top left corner */
  position: absolute;
  left: -50px;
  top: 40px;
  /* for 45 deg rotation */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  /* for creating shadow */
  -webkit-box-shadow: 0 0 10px #888;
  -moz-box-shadow: 0 0 10px #888;
  box-shadow: 0 0 10px #888;

  z-index: 2;

}
.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 100% "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  /* for creating shadow */
  text-shadow: 0 0 5px #444;
}

.img-inside {
  position: relative;
  width: 250px;
  padding: 10px;
  text-align: center;
}

.fit-image {
  width: 100%;
  object-fit: contain;
  height: 200px;
  /* only if you want fixed height */
}

<div class="img-inside">
  <img class="fit-image" src="https://material.angular.io/assets/img/examples/shiba2.jpg">
  <div class="ribbon"> <a href="#">Best doggo</a></div>
</div>

uj5u.com熱心網友回復：

overflow:hidden; padding: 0px;在課堂上添加并在課堂上.img-inside制作top: 30px;.ribbon

.ribbon {
  background-color: #FBBC04;
  overflow: hidden;
  white-space: nowrap;
  /* top left corner */
  position: absolute;
  left: -50px;
  top: 30px;
  /* for 45 deg rotation */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  /* for creating shadow */
  -webkit-box-shadow: 0 0 10px #888;
  -moz-box-shadow: 0 0 10px #888;
  box-shadow: 0 0 10px #888;

  z-index: 2;

}
.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 100% "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  /* for creating shadow */
  text-shadow: 0 0 5px #444;
}

.img-inside {
  position: relative;
  width: 250px;
  padding: 0px;
  text-align: center;
   overflow:hidden;
}

.fit-image {
  width: 100%;
  object-fit: contain;
  height: 200px;
  /* only if you want fixed height */
}

<div class="img-inside">
  <img class="fit-image" src="https://material.angular.io/assets/img/examples/shiba2.jpg">
  <div class="ribbon"> <a href="#">Best doggo</a></div>
</div>

uj5u.com熱心網友回復：

.ribbon {
  background-color: #FBBC04;
  overflow: hidden;
  white-space: nowrap;
  /* top left corner */
  position: absolute;
  left: -50px;
  top: 40px;
  /* for 45 deg rotation */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  /* for creating shadow */
  -webkit-box-shadow: 0 0 10px #888;
  -moz-box-shadow: 0 0 10px #888;
  box-shadow: 0 0 10px #888;

  z-index: 2;

}
.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 100% "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  /* for creating shadow */
  text-shadow: 0 0 5px #444;
}

.img-inside {
  position: relative;
  width: 250px;
 
  text-align: center;
  overflow:hidden
}

.fit-image {
  width: 100%;
  object-fit: contain;
  height: 200px;
  /* only if you want fixed height */
}

<div class="img-inside">
  <img class="fit-image" src="https://material.angular.io/assets/img/examples/shiba2.jpg">
  <div class="ribbon"> <a href="#">Best doggo</a></div>
</div>

標籤：html css

上一篇：如何創建一個帶有輸入的html頁面并告訴輸入的物件屬性？

下一篇：引導下拉選單在移動視圖中不起作用