如何在CSS中为content属性引入的图片设置宽高？

API 探路者

2026-10-1

问题原因

静态图片路径后拼接/500/100的写法仅适用于支持动态裁剪的云存储CDN服务，本地静态资源无法识别该路径规则，会导致资源404加载失败。
直接给::before伪元素设置width/height不生效，是因为伪元素默认是行内元素，行内元素的宽高由内容撑开，无法直接自定义尺寸。

解决方案

推荐使用背景图方案实现，可控性更高：
将你原有的.feature2::before样式替换为以下代码即可：

.feature2::before {
  content: "";
  display: inline-block;
  width: 500px; /* 自定义宽度 */
  height: 100px; /* 自定义高度 */
  background: url(./media/image-computer.png) no-repeat center center;
  background-size: contain; 
  /* background-size可选值：
  contain：完整显示图片，无裁切
  cover：铺满整个元素区域，边缘可能裁切
  也可以直接写具体尺寸，比如background-size: 500px 100px;
  */
}

如果需要保留content插入图片的写法，可以用缩放实现：

.feature2::before {
  content: url(./media/image-computer.png);
  display: inline-block;
  transform: scale(0.6); /* 数值小于1为缩小，大于1为放大，按需调整 */
  /* 若缩放后位置偏移，可以加margin或transform: translate(x,y)调整位置 */
}