当背景图片为svg时，设置自定义宽高无效果。

你是玛卡巴卡嘛

于 2024-03-25 17:17:58 发布

阅读量779

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_47494533/article/details/137019963

本文介绍了如何在HTML中使用SVG路径作为背景图片，并结合CSS的`background`属性、`preserveAspectRatio`和自定义尺寸及位置，实现响应式背景图效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 background:url('@/assets/images/zhengti/homeImg1.svg') 引入svg路径后面加上#svgView(preserveAspectRatio(none))

<div class="mine-box"></div>

<style>
.mine-box {
        height: 100%;
        box-sizing: border-box;     
  background:url('@/assets/images/zhengti/homeImg1.svg#svgView(preserveAspectRatio(none))')
            no-repeat;
        background-size: 101.7% 103%;
        background-position: -15px -12px;
    }

<style>