VUE图片添加角标,图片右上角或左上角添加标识
vue图片添加角标,图片左上角或右上角添加标识
·
VUE图片添加角标,图片右上角或左上角添加标识
在图片的右上角或左上角添加图片或文字
原理: 使用position: relative相对定位将角标(已发)定位到图片上
建议: 最外层的div添加overflow: hidden;属性,此可以在图片超出div时2进行隐藏
示例代码如下:
<template>
<div class="demo-image">
<el-image
style="width: 100px; height: 100px; "
:src="url">
</el-image>
<div class="published-div">
<img src="../assets/rectangle.png" class="published-image"/>
<span class="published-text">已发</span>
</div>
</div>
</template>
<script>
export default {
name: 'CornerMark',
data() {
return {
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
}
}
}
</script>
<style scoped>
.demo-image {
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 14px;
}
.published-div {
position: relative;
top: -108px;
right: -42px;
}
.published-text {
position: relative;
top: -11px;
width: 10px;
right: 48px;
font-size: 10px;
margin-top: 0;
color: white;
}
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)