背景图片不重复、自定义宽高

记录学习的邹邹

已于 2023-04-12 14:22:56 修改

阅读量260

点赞数

文章标签：前端 css

于 2023-01-03 14:05:07 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_48290402/article/details/128532156

版权

该代码段展示了如何在CSS中设置背景图片，使其不被拉伸。使用了`background-size:100%100%`保持原图比例，同时通过`border-image`属性进行复杂边框图片的定义，以实现特定的显示效果。

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

.top {
    width: 29.3125rem;
    height: 9.125rem;
    background-image: url("./1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

背景图不拉伸

background: none !important;
  border-image-source: url(../assets/maskbg.svg);
  border-image-slice: 50 50 0 50 fill;
  border-image-width: 50px 50px 0px 50px;