【vue】
把图片作为文字背景,并使图片自适应。
实现效果展示:
<template>
<div class="img_bkg">
测试文字
</div>
</template>
<script>
export default {
data() {
return {
};
},
};
</script>
<style lang="scss" scoped>
.img_bkg {
object-fit: scale-down;
background-image: url("@/assets/img/03.jpg");
width: 400px;
height: 300px;
background-repeat:no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;
line-height: 300px;
text-align: center;
color: aliceblue;
font-size: 40px;
}
</style>