Question

我正在尝试标记SOLD OUT，如下面figure

所示

但能够实现如下图所示的某种扩展

使用以下HTML＆amp; CSS

<a href="some-href">
  <img src="img-url">
  <div class="wp-sold-out-strip">SOLD OUT</div>
</a>

.wp-sold-out-strip {
text-align: center;
background-color: #8760AF;
width: 142px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -47px;
transform: rotate(-26deg);    
}

Answer 1

你需要做一些事情：

将父级position设置为relative（在您的情况下），将overflow设置为hidden。
将“售罄”的width设置为溢出的内容，将图片的height和width设置为100%以填充父级

您需要父级的position:relative，因此当position:absolute和overflow:hidden将应用于其中时，“已售罄”将与其父级对齐。

.parent {overflow: hidden; position: relative; display: block; width: 200px; height: 200px;}
.parent img { width: 100%; height: 100%;}
.wp-sold-out-strip {
text-align: center;
background-color: #8760AF;
width: 242px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -47px;
transform: rotate(-26deg);    
}

<a href="some-href" class="parent">
  <img src="http://i.stack.imgur.com/Mmww2.png">
  <div class="wp-sold-out-strip">SOLD OUT</div>
</a>

https://jsfiddle.net/ivankovachev/snxt61an/

Answer 2

试试这个，设置backface-visibility:hidden

a{
  text-decoration:none;
  width:200px;
  height:200px;
  display:block;
  position:relative;
  overflow:hidden;
}
a > img{
  width:100%;
  height:100%;
}
a > .wp-sold-out-strip {
width: 180px;
color: #FFF;
font-size: 13px;
font-weight: bold;
position: absolute;
text-align: center;
background-color: #8760AF;
bottom:20px;
right:-30px;
transform:rotate(-30deg);
-webkit-backface-visibility:hidden;
}

<a href="some-href">
  <img src="https://source.unsplash.com/user/erondu">
  <div class="wp-sold-out-strip">SOLD OUT</div>
</a>

Answer 3

这是解决方案！...

试试这段代码......

<div class="img-wraper">
  <a href="some-href" class="">
    <img src="img-url">
    <div class="wp-sold-out-strip">SOLD OUT</div>
  </a>
</div>


<style media="screen">
  .img-wraper {
    width: 200px;
    height: 200px;
    overflow: hidden;
    border: 4px solid #cccccc;
  }
  .img-wraper a {
    display: block;
    position: relative;
  }
  .img-wraper a img {
    width: 100%;
    height: 100%;
  }
  .wp-sold-out-strip {
    position: absolute;
    bottom: 20px;
    right: -30px;
    width: 142px;
    transform: rotate(-33deg);
    text-align: center;
    background-color: #8760AF;
    color: #FFF;
    font-size: 13px;
    font-weight: bold;
  }
</style>

Answer 4

这是另一个答案。 Fiddle

我在横幅上设置父元素position: relative和position: absolute的方法。然后，您可以更轻松地将该项与top和left对齐。

将父级设置为overflow: hidden也很重要，这样就不会在图像外突出任何内容。最后，您需要覆盖锚标记的默认inline行为，以便您可以正确对齐横幅。

我还增加了文本的左边距，使其显示为居中。

.wp-sold-out-strip {
  text-align: center;
  background-color: #8760AF;
  width: 170px;
  color: #FFF;
  font-size: 13px;
  font-weight: bold;
  padding: 7px 0 7px 14px;
  position: absolute;
  top: 107px;
  left: -2px;
  transform: rotate(-26deg);
}
a {
  overflow: hidden;
  position: relative;
  width: 150px;
  height: 150px;
  display: inline-block;
}

<a href="some-href">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150">
  <div class="wp-sold-out-strip">SOLD OUT</div>
</a>

Answer 5

添加

height:30px;
line-height:28px;

并更改此值：

margin-top: -70px;

演示（橙色的新标签，紫色的旧标签），享受：

.wp-sold-out-strip {
text-align: center;
background-color: tomato;
width: 142px;
height:30px;
line-height:28px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -70px;
transform: rotate(-26deg);    
}

<a href="some-href">
  <img src="http://i.stack.imgur.com/Nahj0.png">
  <div class="wp-sold-out-strip">SOLD OUT</div>
</a>

使用CSS锐利边框

5 个答案: