javascript - 在 div 上制作图像,如邮票
问题描述
我有 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>
推荐阅读
- excel - 有没有办法使用 VBA 比较不同工作表上的两个表,看看它们是否匹配/符合标准?
- python-3.x - 从 Python 对网站进行简单查询
- python - 做一个基本的TypeError?
- windows - 无法在带有 Windows 的 docker 容器内安装 pip 包
- powershell - Powershell 使用 Gmail 在文件夹中发送 .csv 文件
- javascript - 如何在jquery的if语句中选择元素
- flutter - 为什么这个容器的背景是透明的,只适用于网页?
- java - Android:通话中音量静音
- javascript - 当我尝试为 Vue.js 导入插件时出现“未捕获的语法错误:无法在模块外使用导入语句”
- python - 从列表中删除重复项,但考虑元素的类型并保留顺序