文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >带有SVG背景的DIV不会完全覆盖父级

问带有SVG背景的DIV不会完全覆盖父级
EN

Stack Overflow用户
提问于 2018-07-26 15:32:35
回答 2查看 377关注 0票数 0

所以，看看下面的代码，它有一个带有横幅的父div，以及一个子div，它意味着它里面有一个SVG的“覆盖”背景。您可以看到，覆盖并不完全覆盖父层，在左侧和右侧有一个很小的缺口。

​

代码语言：javascript
复制
.HeroImage {
     position: relative;
     width: 934px;
}
.HeroImage-Arc {
     position: absolute;
     width: 100%;
     height: 100%;
     background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440.5 82'%3E%3Cg%3E%3Cg%3E%3Cpath d='M1440.5,0q-360,82-720,82T.5,0L0,81.5H1440Z' style='fill:%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center bottom no-repeat;
     top: 0;
}
代码语言：javascript
复制
<section class="HeroImage">
  <img src="https://cdn.esigns.com/pub-data/prod/imagebox/9/887/Free-Product-Samples_Imagebox_Landing-Page-R.png">
  <div class="HeroImage-Arc"></div>
</section>

​

但是，下面的第二个代码示例将SVG替换为PNG，它运行良好。

​

代码语言：javascript
复制
.HeroImage {
     position: relative;
     width: 934px;
}
.HeroImage-Arc {
     position: absolute;
     width: 100%;
     height: 100%;
     background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaEAAABSCAMAAAB63uhxAAAC2VBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8Xe6ihAAAA8nRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCorLC0vMDEyMzQ1Njc4Ojs8PT4/QEFCQ0RFRkdISUpMTU5PUFFSVFVWV1hZWltcXV5fYGFiY2RlZmdoaWprbG1ub3BxcnN0dXZ3eHl6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') center bottom no-repeat;
     top: 0;
}
代码语言：javascript
复制
<section class="HeroImage">
  <img src="https://cdn.esigns.com/pub-data/prod/imagebox/9/887/Free-Product-Samples_Imagebox_Landing-Page-R.png">
  <div class="HeroImage-Arc"></div>
</section>

​

显而易见的解决方案是，使用PNG版本。然而，这主要是一个学术性的问题--我想弄清楚为什么SVG版本不起作用--但它也很实用，因为给定图像的SVG版本通常要小得多，就像这里的情况一样。

html
css
svg
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-27 19:20:36

其原因是高宽比不相容。

您的SVG的高宽比(来自viewBox)为：

代码语言：javascript
复制
1440.5/82 ~= 17.5671

当它试图缩小到div的宽度(934 to )时，它的计算大小为：

代码语言：javascript
复制
width:  934
height: 934 / (1440.5 / 82) ~= 53.1677 px

然后将SVG呈现为中间位图:934 an x 53 an。

但是SVG viewBox再次发挥作用，因为它希望在呈现SVG时保持高宽比正确。因此，由于呈现的高度小于53.167px，所以宽度也是一样的。最终将达到(934 * (53/53.1677)) ~= 931 53。

您可以通过以下方式减轻这些问题：

  1. 使用舍入为整单位的viewBox和路径坐标
  2. 指定一个不会导致宽度缩小到931的background-size。例如：934px 54px。

​

代码语言：javascript
复制
.HeroImage {
     position: relative;
     width: 934px;
}
.HeroImage-Arc {
     position: absolute;
     width: 100%;
     height: 100%;
     background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 82'%3E%3Cg%3E%3Cg%3E%3Cpath d='M1440,0q-360,82-720,82T0,0L0,82H1440Z' style='fill:%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center bottom no-repeat;
     top: 0;
     background-size: 934px 54px;
}
代码语言：javascript
复制
<section class="HeroImage">
  <img src="https://cdn.esigns.com/pub-data/prod/imagebox/9/887/Free-Product-Samples_Imagebox_Landing-Page-R.png">
  <div class="HeroImage-Arc"></div>
</section>

​

这在Firefox上似乎是完美的，但在Chrome的右边仍然有一个小块。可能是因为某种舍入错误。

最简单的解决方法是让您的路径在viewBox外部绘制几个像素，这样路径总是被绘制到至少到外部边界为止。

例如，让我们把路径从-2改为1442，而不是0到1440。

​

代码语言：javascript
复制
.HeroImage {
     position: relative;
     width: 934px;
}
.HeroImage-Arc {
     position: absolute;
     width: 100%;
     height: 100%;
     background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 82'%3E%3Cg%3E%3Cg%3E%3Cpath d='M1442,0q-360,82-720,82T-2,0L0,82H1442Z' style='fill:%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center bottom no-repeat;
     top: 0;
     background-size: 934px 54px;
}
代码语言：javascript
复制
<section class="HeroImage">
  <img src="https://cdn.esigns.com/pub-data/prod/imagebox/9/887/Free-Product-Samples_Imagebox_Landing-Page-R.png">
  <div class="HeroImage-Arc"></div>
</section>

​

票数 2
EN

Stack Overflow用户

发布于 2018-07-26 15:59:59

您可以使用svg本身而不是div.HeroImage-Arc

​

代码语言：javascript
复制
.HeroImage {
     position: relative;
     width: 934px;
}
svg {
     position: absolute;
     width: 100%;
     bottom: 0;
}
代码语言：javascript
复制
<section class="HeroImage">
  <img src="https://cdn.esigns.com/pub-data/prod/imagebox/9/887/Free-Product-Samples_Imagebox_Landing-Page-R.png">
  <svg viewBox="0 0 1440.5 82"><path fill="#fff" d="M1440.5 0q-360 82-720 82T0 0L0 81.5h1440.5z"/></svg>
</section>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51542583

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档