1,问题描述
想对伪元素添加图片并控制图片大小,步骤如下:
- 设置
content
为图片路径 - 设置
width height
控制图片大小
代码如下:
<template>
<p>图片原大小32*32</p>
<img src="/vite.svg" alt="" />
<div class="box">下雪天的夏风</div>
</template>
<style lang="scss">
.box {
&::after {
content: url("/vite.svg");
display: inline-block;
width: 16px;
height: 16px;
}
}
</style>
效果如下:
可以看到,给::after
设置的width height
并没有影响到 content
中的图片大小。
2,原因分析
因为使用 content
属性插入的内容都是匿名的可替换元素。
可替换元素,CSS 可以影响它的位置,但不会影响它的内容。
所以,给::after
设置的width height
是无效的。
3,解决方案
通过背景图片的方式来实现。
<template>
<p>图片原大小32*32</p>
<img src="/vite.svg" alt="" />
<div class="box">下雪天的夏风</div>
</template>
<style lang="scss">
.box {
&::after {
content: "";
background-image: url("/vite.svg");
background-size: contain;
display: inline-block;
width: 16px;
height: 16px;
}
}
</style>
效果如下:
以上。
参考