Question

我有一个形状，我试图把一个带有背景图像的文本框放在上面。这种形状将采用不同尺寸的容器并相应地按比例缩放。我遇到的问题是背景图像也是如此，我希望它在不使用剪辑路径的情况下保持相同的大小。请参阅我正在谈论的代码。这让我发疯了！

＆＃13;

.container {
  width: 75%;
}

.box {
  background-image: url("https://s22.postimg.org/dhkk3e8sh/Blue_881.jpg");
  padding-top: 5px;
  padding-left: 25px;
  padding-right: 20px;
  padding-bottom: 5px;
  margin-top: -5px;
}

p {
  color: white;
}

＆＃13;

<div class="container">

<svg width="100%" height="auto"  viewBox="375 265 1268 45.3">
  
  <defs>
 <pattern id="img1" height="30%" width="30%"
         patternContentUnits="objectBoundingBox" 
         viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
    <image height="1" width="1"  preserveAspectRatio="xMidYMid slice" 
           xlink:href="https://s22.postimg.org/dhkk3e8sh/Blue_881.jpg" />
</pattern>
</defs>
  
  <path d="M369,291.8v19.7h1280v-22.7c0,0-137-21.6-277-21.6c-308,0-534,34.9-726,34.9C460,302.2,369,291.8,369,291.8z" fill="url(#img1)" />
</svg>

<div class="box">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde 
  </p>
  
  </div>

＆＃13;

如果您更改容器的百分比大小，您将会看到我正在谈论的内容。

感谢您的帮助！

Answer 1

首先，您需要摆脱SVG中的viewBox。这会导致SVG缩放，这会影响SVG中的任何内容。您还希望模式为1：1，这意味着切换到patternContentUnits="userSpaceOnUse"并使模式使用实际大小的图像。

我们也在使用overflow:hidden，因此非缩放SVG不会强制父SVG更宽。

这会让你接近。该模式现在是1：1，但它并不完全与HTML格式排列，因为它们具有不同的模式起源。您可以通过调整模式的x和y属性来调整它，直到它正确排列。我会留给你的。

.container {
  width: 75%;
  overflow: hidden;
}

.box {
  background-image: url("https://s22.postimg.org/dhkk3e8sh/Blue_881.jpg");
  padding-top: 5px;
  padding-left: 25px;
  padding-right: 20px;
  padding-bottom: 5px;
  margin-top: -5px;
}

p {
  color: white;
}

<div class="container">

<svg width="1268" height="45.3">
  <defs>
 <pattern id="img1" patternUnits="userSpaceOnUse" width="881" height="192">
    <image width="881" height="192" 
           xlink:href="https://s22.postimg.org/dhkk3e8sh/Blue_881.jpg" />
</pattern>
</defs>
  
  <path transform="translate(-375 -265)"
        d="M369,291.8v19.7h1280v-22.7c0,0-137-21.6-277-21.6c-308,0-534,34.9-726,34.9C460,302.2,369,291.8,369,291.8z" fill="url(#img1)" />
</svg>

<div class="box">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde 
  </p>
  
  </div>

固定大小的SVG背景图像

1 个答案: