我正在尝试在响应式设计网站上制作一个 Angular 丝带以放置在图像上。我已经用到目前为止的代码设置了一个 fiddle 页面。如您所见,它似乎插入了一个顶部 margin
(色带的 Angular 没有消失)并且 overflow
没有被隐藏。有什么想法吗?
JSfiddle
.ribbon-holder {
overflow: hidden;
}
.ribbon {
position: relative;
background: yellow;
color: black;
transform: rotate(-45deg);
text-align: center;
top: 52px;
left: -32px;
width: 145px;
}
<div class="ribbon-holder">
<div class="ribbon ribbon-holder">Free Shipping!</div>
<a href="http://www.somesite.com">
<img src="http://www.adventurouskate.com/wp-content/uploads/2016/01/planes-black-shower-curtain.jpg" alt="Shower Curtin" />
</a>
</div>
最佳答案
使用position:relative
在 parent ( .ribbon-holder
) 和 absolute
在 child ( .ribbon
)
.ribbon-holder {
overflow: hidden;
position: relative
}
.ribbon {
position: absolute;
background: yellow;
color: black;
transform: rotate(-45deg);
text-align: center;
top: 32px;
left: -32px;
width: 145px;
}
<div class="ribbon-holder">
<div class="ribbon ribbon-holder">Free Shipping!</div>
<a href="http://www.somesite.com">
<img src="http://www.adventurouskate.com/wp-content/uploads/2016/01/planes-black-shower-curtain.jpg" alt="Shower Curtin" />
</a>
</div>
关于html - 响应图像的 Angular 带,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35943454/