我需要将角落色带与我的图像对齐。这就是我设法做的事情：
<div class="row">
<div class="col-sm-6">
<a href="http://website.com">
<img src="/images/web1.jpg"><div class="ribbon"><span>Featured</span></div></img>
</a><br><br>
<hr>
</div>
<div class="col-sm-6">
<a href="http://website.com">
<img src="/images/web2.jpg"><div class="ribbon"><span>Featured</span></div></img>
</a><br><br>
<hr>
</div>
</div>
css
.ribbon {
position: absolute;
right: 62px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px;
height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
color: #fff;
text-transform: uppercase;
text-align: center;
font-weight: bold; line-height: 20px;
transform: rotate(45deg);
width: 100px; display: block;
background: #79A70A;
background: linear-gradient(#9BC90D 0%, #79A70A 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; right: -21px;
}
.ribbon span::before {
content: '';
position: absolute;
left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #79A70A;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
.ribbon span::after {
content: '';
position: absolute;
right: 0%; top: 100%;
z-index: -1;
border-right: 3px solid #79A70A;
border-left: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
如果我放置固定的高度和宽度，色带工作正常，但如何使色带粘在图像的右上角？感谢
EDITED
<div class="row">
<div class="col-sm-6">
<div class="wrappersa"> <a href="http://website.com">
<img class="img-responsive" src="/images/web3.jpg" />
<div class="ribbon-wrapper-green">
<div class="ribbon-green">New</div>
</div>
</a><br><br>
<p><strong>Website</strong<br>This is a website</p><br><hr>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
CSS
.wrappersa {
margin: 20px auto;
width: 450px;
height: 430px;
position: relative;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font-size: 10px;
color: #fff;
text-transform: uppercase;
text-align: center;
font-weight: bold;
line-height: 20px;
transform: rotate(45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#9BC90D 0%, #79A70A 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px;
right: -21px;
}
.ribbon-green:before, .ribbon-green:after {
content:'';
position: absolute;
left: 0px;
top: 100%;
z-index: -1;
border-left: 3px solid #79A70A;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
@media (max-width : 992px) {
.wrappersa {
margin: 20px auto;
width: 100%;
height: auto;
position: relative;
}
}
答案 0 :(得分：3)
这可能会有所帮助，但正如您所说，如果图像大小是动态更改的，则功能区并未真正考虑因素，因此所有图像大小都必须固定且相同。
更新了底部文字标题。
figure {
display: inline-block;
}
figure img {
vertical-align: top;
}
figure figcaption {
padding: 5px 0;
text-align: center;
background: #9BC90D;
}
.wrapper a {
color: #fff;
}
/*****************/
.wrapper {
margin: 20px auto;
width: 450px;
height: 430px;
position: relative;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font-size: 10px;
color: #fff;
text-transform: uppercase;
text-align: center;
font-weight: bold;
line-height: 20px;
transform: rotate(45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#9BC90D 0%, #79A70A 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px;
right: -21px;
}
.ribbon-green:before,
.ribbon-green:after {
content: '';
position: absolute;
left: 0px;
top: 100%;
z-index: -1;
border-left: 3px solid #79A70A;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
@media (max-width: 992px) {
.wrapper {
margin: 20px auto;
width: 100%;
height: auto;
position: relative;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="wrapper">
<a href="https://something.io">
<figure>
<img class="img-responsive" src="http://placehold.it/950x500/1c1c1c/fff/?text=Image" />
<figcaption><strong>Website</strong>
<br>This is a website
</figcaption>
</figure>
<div class="ribbon-wrapper-green">
<div class="ribbon-green">New</div>
</div>
</a>
<hr>
</div>
</div>
<div class="col-sm-6">
<div class="wrapper">
<a href="https://something.io">
<figure>
<img class="img-responsive" src="http://placehold.it/950x500/1c1c1c/fff/?text=Image" />
<figcaption><strong>Website</strong>
<br>This is a website
</figcaption>
</figure>
<div class="ribbon-wrapper-green">
<div class="ribbon-green">New</div>
</div>
</a>
<hr>
</div>
</div>
</div>
</div>