我有一个 div 并且想把像图章这样的图像放在 div 的右上角
这是我已经完成的代码
.package-item-header {
margin-top:20px;
margin-left:20px;
width: 200px;
background-color: #efefef;
text-align: center;
font-size: 24px;
position: relative;
padding: 20px;
}
.package_stamp{
height: 30px;
width: 30px;
background: url('https://i.imgur.com/bPR0GVD.png') 50px no-repeat;
background-position: center;
position:absolute;
top:0;
right:0;
}
<div class="package-item-header">
<div class="package_stamp"></div>
GOLD
</div>
但它只是放在div的右下角,而不是放在div之上。
如何让它变成这样,但背景是透明的?
最佳答案
您可以通过使用负的 top
和 right
值以及 position: absolute
将图像移动到其父级上。 overflow:visible
确保图像在父边界之外可见,但在这种情况下不是必需的。
我还添加了 background-size: cover
以使背景图像填充元素。
.package-item-header {
margin-top: 20px;
margin-left: 0;
width: 200px;
background-color: #efefef;
text-align: center;
font-size: 24px;
position: relative;
padding: 20px;
overflow: visible;
float: left;
}
.package_stamp {
height: 60px;
width: 60px;
background: url('https://i.imgur.com/bPR0GVD.png') 50px no-repeat;
background-position: center;
position: absolute;
top: -20px;
right: -20px;
background-size: cover;
z-index: 1;
}
<div class="package-item-header"><img class="package_stamp" />GOLD</div>
<div class="package-item-header"><img class="package_stamp" />GOLD</div>
<div class="package-item-header"><img class="package_stamp" />GOLD</div>
关于javascript - 在 div 上制作图像,如邮票,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51099400/