- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在应用 SVG 图像 mask 来创建一个框架和图像,如下所示:
img {
mask-repeat: no-repeat;
mask-size: 100% 100%;
mask-image: url('i/test-mask.svg');
}
预期结果: mask 应不成比例地拉伸(stretch)以适应元素的大小。据我所知,掩码大小应该像背景大小一样工作,并且这在背景大小中按预期工作(将背景宽度拉伸(stretch)/扭曲为包含元素宽度的 100%,将高度拉伸(stretch)/扭曲为包含元素宽度的 100%元素的高度)。
实际结果:蒙版包含到图像高度的 100%,但保持比例,因此不会显示图像的整个宽度。
我在这里错过了什么?
这是一个工作示例:
img.masked {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 230" xml:space="preserve"><path d="m4.5 225.2 4.8 4.8 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l4.7-4.7-5.3-5.4 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7V155l-8.6-8.6 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.6V8l-7.9-8h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L301 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L137 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2L82.3 0l-9.1 9.2L64.1 0 55 9.2 45.9 0h-.1l-9 9.2L27.7 0h-.1l-9.1 9.2-9-9.2h-.1L.3 9.2.1 9l-.1.1v1.1l8.6 8.6L0 27.4v1.1l8.6 8.7L0 45.8v1.1l8.6 8.7L0 64.2v1.1L8.6 74 0 82.6v1.1l8.6 8.6L0 101v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.6v1.2l8.6 8.6-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7z"/></svg>');
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 230" xml:space="preserve"><path d="m4.5 225.2 4.8 4.8 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l4.7-4.7-5.3-5.4 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7V155l-8.6-8.6 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.6V8l-7.9-8h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L301 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L137 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2L82.3 0l-9.1 9.2L64.1 0 55 9.2 45.9 0h-.1l-9 9.2L27.7 0h-.1l-9.1 9.2-9-9.2h-.1L.3 9.2.1 9l-.1.1v1.1l8.6 8.6L0 27.4v1.1l8.6 8.7L0 45.8v1.1l8.6 8.7L0 64.2v1.1L8.6 74 0 82.6v1.1l8.6 8.6L0 101v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.6v1.2l8.6 8.6-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7z"/></svg>');
}
img {
display: block;
margin-top: 20px;
}
svg.example {
max-width: 500px;
}
<p>Masked image:</p>
<img class="masked" src="https://picsum.photos/500/250" width="500" height="250" />
<p>Original Image:</p>
<img src="https://picsum.photos/500/250" width="500" height="250" />
<p>Image Mask:</p>
<svg class="example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 230" xml:space="preserve"><path d="m4.5 225.2 4.8 4.8 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l4.7-4.7-5.3-5.4 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7V155l-8.6-8.6 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.6V8l-7.9-8h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L301 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L137 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2L82.3 0l-9.1 9.2L64.1 0 55 9.2 45.9 0h-.1l-9 9.2L27.7 0h-.1l-9.1 9.2-9-9.2h-.1L.3 9.2.1 9l-.1.1v1.1l8.6 8.6L0 27.4v1.1l8.6 8.7L0 45.8v1.1l8.6 8.7L0 64.2v1.1L8.6 74 0 82.6v1.1l8.6 8.6L0 101v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.6v1.2l8.6 8.6-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7z"/></svg>
https://jsfiddle.net/StudioAl/jokbL97u/29/
预计到达时间:链接的 SVG 代码:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1922.5 1920" xml:space="preserve"><path d="M1922.5 3.9c-5.6-.5-11.1-1.5-16.5-2.9-14.9 5.1-29.6.9-44.4-1l-196.5 5.6c-1.3-.2-2.6-.2-3.9-.4-3.3-.4-6.6-.2-9.8.7l-22.2 1.7c-2.7-.4-5.4-.2-8 .6l-11.5 1.8c-1.3.1-2.7.3-4 .6l-24.7 3.8c-17.2 2.9-34.5 2.4-51.7 1.2-20.6-1.4-41.6 4.2-61.9-3-1.8-.7-4.5.6-6.8.9-5 .6-10.1 1.7-15.1 1.6-13.3-.2-26.7-3.2-40.1-1.1-3.9.7-7.8 1.1-11.7 1.3-12.1.1-24.1.4-36.2.3-5.1-.1-10.2-1.1-15.3-1.4-9.2-.6-18.5-1.9-27.6-1.1-17.7 1.5-35.4 6.5-52.8 5.7-17.2-.8-34.3 1-51.6-1-21.6-2.5-43.9-.4-65.9-.7-31-.4-62-1.3-92.9-1.9-11.1-.2-22.3-.1-33.5-.6-15.8-.7-31.7-.6-47.5.4-16.6 1.1-33.4-1.7-50.2-2.5-5.2-.3-10.3.6-15.5.9-13.9.7-27.8 1.5-41.7 1.7-3.9 0-7.9-.3-11.8-.5-15.7-.8-31.6 3.1-47.3-1.3-3-.8-6.6 0-9.8.3-5.5.5-11 1.8-16.5 1.7-18.2-.3-36.5-1.4-54.8-1.6-22.5-.3-45.1.1-67.7 0-37.3-.1-74.5-.1-111.8-.5-14.8-.1-48.1-1.4-62.9-1.9-11.7-.4-23.5-.3-35.2-1.1-16.4-1-32.8-3-49.3-4-33.8-1.9-67.4-4.5-101.5-.6-25.8 2.9-51.7 3-77.7 2.5-9.1-.1-19.1 3.3-27.4 1.1-17.2-4.6-34.4-.7-51.7-2.5C106 3.4 73.8 4.1 41.8 3.6c-13.1-.2-26.2-.2-39.3-.2v576.2H0v1325h.5c34.8.2 69.7 1.1 104.5 1.8 5.6.2 11.2 1.2 16.8 1.1 19.7-.3 39.3-1.5 58.9-1.3 28.7.3 57.4 1.8 86.1 2.1 19.3.3 38.6-1.1 57.8-.8 18.2.3 36.4 2.7 54.6 2.3 44.1-1 88.1 5.1 132.4 1.3 16.1-1.4 32.5.9 48.8 1.4 20.7.7 41.6 3 62.1 1.2 17.2-1.5 34.3-.7 51.4-.9 21.8-.3 57.4-1.2 79.2-1.4 21.2-.2 42.5-.9 63.8-.7 15.3.1 30.6-3.4 46-.1 1.8.3 3.8-.2 5.7-.3 18.3-.8 36.6-1.7 54.9-2.3 42.7-1.3 85.5-2.5 128.2-3.4 15-.3 30.1.3 45.2.8 3.6.2 7.1 2 10.7 2 20.2 0 40.4-1 60.6-.5 25.8.7 51.5 2.7 77.2 3.8 23.4.9 46.9 1.3 70.3 2.2 25.7.9 51.4 2 76.8 3.3 11.3.6 22.9.4 33.6 3 2.1.6 4.4.8 6.6.8.6 0 1.3-.1 1.9-.1l53.3-1.2c8.1.5 16.2.3 24.2-.6h1.4v-.1c5.1-.6 10-1.6 14.9-2.9 2.6-.8 6.3-2.1 8-1.1 9.4 5.5 19.3 2.1 29 2 13.8-.1 27.9-2.6 41.1-.5 14.1 2.2 27.1-8.4 41-1.1 1.5.7 5.1-1.6 7.7-2.6s5.7-3.7 7.6-3.1c11.2 3.3 21.6-1 32-2.4 11.1-1.5 22.7 4 33.2-1.9 4.2-2.3 9.5-2.7 14.3-1.8 10 1.8 20.5 2.1 30.7 2.1 16.5 0 33-.5 49.5-1.2 6.6-.2 13-1.8 19.5-2.1 12.7-.5 25.9-5.2 36.9 6.3 4.5 4.8 12.5 7.7 19.5 9.7 2.1.6 4.4 1 6.6 1.1h1.2l16.3-.1V3.9z"/></svg>
最佳答案
您需要将 preserveAspectRatio="none"
设置为 SVG
img.masked {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 230" preserveAspectRatio="none" xml:space="preserve"><path d="m4.5 225.2 4.8 4.8 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l4.7-4.7-5.3-5.4 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7V155l-8.6-8.6 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.6V8l-7.9-8h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L301 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L137 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2L82.3 0l-9.1 9.2L64.1 0 55 9.2 45.9 0h-.1l-9 9.2L27.7 0h-.1l-9.1 9.2-9-9.2h-.1L.3 9.2.1 9l-.1.1v1.1l8.6 8.6L0 27.4v1.1l8.6 8.7L0 45.8v1.1l8.6 8.7L0 64.2v1.1L8.6 74 0 82.6v1.1l8.6 8.6L0 101v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.6v1.2l8.6 8.6-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7z"/></svg>');
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 230" xml:space="preserve"><path d="m4.5 225.2 4.8 4.8 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l4.7-4.7-5.3-5.4 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7V155l-8.6-8.6 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.6V8l-7.9-8h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L301 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L137 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2L82.3 0l-9.1 9.2L64.1 0 55 9.2 45.9 0h-.1l-9 9.2L27.7 0h-.1l-9.1 9.2-9-9.2h-.1L.3 9.2.1 9l-.1.1v1.1l8.6 8.6L0 27.4v1.1l8.6 8.7L0 45.8v1.1l8.6 8.7L0 64.2v1.1L8.6 74 0 82.6v1.1l8.6 8.6L0 101v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.6v1.2l8.6 8.6-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7z"/></svg>');
}
img {
display: block;
margin-top: 20px;
}
svg.example {
max-width: 500px;
}
<p>Masked image:</p>
<img class="masked" src="https://picsum.photos/500/250" width="500" height="250" />
<p>Original Image:</p>
<img src="https://picsum.photos/500/250" width="500" height="250" />
<p>Image Mask:</p>
<svg class="example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 230" xml:space="preserve"><path d="m4.5 225.2 4.8 4.8 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l4.7-4.7-5.3-5.4 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7V155l-8.6-8.6 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.6V8l-7.9-8h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L301 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L137 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2L82.3 0l-9.1 9.2L64.1 0 55 9.2 45.9 0h-.1l-9 9.2L27.7 0h-.1l-9.1 9.2-9-9.2h-.1L.3 9.2.1 9l-.1.1v1.1l8.6 8.6L0 27.4v1.1l8.6 8.7L0 45.8v1.1l8.6 8.7L0 64.2v1.1L8.6 74 0 82.6v1.1l8.6 8.6L0 101v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.6v1.2l8.6 8.6-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7z"/></svg>
关于css - 掩码大小 : 100% 100% does not stretch horizontally,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68477841/
好吧,这是最好用图像来解释的事情...... 我正在寻找一个类似于 StretchBlt 的函数,但我可以将图像复制到定义目标四个角的 Canvas 上,即将图像的梯形/四边形拉伸(stretch)绘
我为 UITextField 制作了一个自定义键盘,其中包含 18 个 UIButton。它是一个 UIView,被设置为文本字段的 inputView。 按钮是在 UIView 的 initWith
我想创建一个 UIButton,它使用可拉伸(stretch)图像作为背景图像,例如我可以轻松调整按钮大小以适应不同的标签等。 所以我创建了以下运行良好的代码: UIImage *bgImage =
我正在尝试拉伸(stretch) UIImageView 中的图像 - 但我惨败了:) 以下设置: 带有 View 和附加到该 View 的 UIImageView 的 NIB 文件。 使用IBOut
我一直在尝试使用 html Canvas ,但由于某种原因,很难让它不拉伸(stretch)东西。我试过只使用 screen.width 和 screen.height,但我通过使用 screen.a
我想拉伸(stretch)上图的左右两侧,并保持中间的箭头不拉伸(stretch)。我怎样才能做到这一点? 最佳答案 如果你不喜欢打扰 Photoshop 并且图像不需要动态调整大小,你可以使用我在
我的页脚在一个容器中有四列。它需要在容器内以与上面的内容对齐。 我的问题是我想让左栏有红色背景,但目前它不会拉伸(stretch),因为它显然在容器中。 我怎样才能将它向左拉伸(stretch)整个宽
有没有办法拉伸(stretch)按钮,使中央部分保持完整? 9-patch 不允许这样做。 编辑:我按照 Benito 的建议使用了 9-patch。它工作正常。奇怪的是,我第一次无法得到它。 最佳答
我想拉伸(stretch)上图的左右两边,中间的箭头不拉伸(stretch)。我该怎么做? 最佳答案 如果你不想打扰 Photoshop 并且如果图像不需要动态调整大小,你可以在 UIImage 上使
我创建了一个 9patch 图像,不知何故它只能垂直拉伸(stretch)。我尝试了其他 9-patch 图像,但它们具有相同的效果,为什么它们在其他情况下工作。所以我认为 9patch 应该没问题。
我需要在边框控件(或类似控件)中绘制一些简单的线条,这些线条始终延伸到边框的边界。有没有办法只拉伸(stretch)线条而不是它的笔?不涉及大量 C#? 在这个版本中,线条延伸:
这是我的 XAML 及其外观:
编辑:答案将允许背景图像根据 body 的大小改变它的高度。如果正文是 500px 高,它应该是 100% 宽度,500px 高度。或 100% 宽度 2500 像素高度。 也许我错过了这件事,但我正
我有一个 UILabel。我设置了尾随和前导空间约束,还添加了对齐 Y 中心约束。我已将行数设置为零。 我的目标是将 UILabel 拉伸(stretch)到某个最大宽度,然后添加新行。在给定的约束条
我正在制作一个网站,对于该网站,我正在使用顶部的导航栏。我想要的是将栏放在页面的顶部,并且它是主页的单独颜色。这是我当前的代码: body { font-family: "Baloo Bhaina
我编写了代码来 reshape 已纹理化的四边形。当我拉伸(stretch)四边形时,图像确实按照我的预期拉伸(stretch)了。我似乎在拉伸(stretch)图像时有两个不同的三角形,图像被拉伸(
我在 div 中嵌入了 YouTube。此 div .entry-content 的 max-width 为 30em。 YouTube 嵌入我想要全窗口宽度,延伸到 #container 之外。为此
看: //UIImageView* stretchTest = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.png"]
我有一个 super 简单的网页,由纯 HTML/CSS 组成。正如预期的那样,当我在本地运行它时,一切正常。 但是,当我部署它时(使用 Droppages,一个通过 Dropbox 的静态页面托管平
我正在尝试将一个 9 色 block 图像设置为我的一项 Activity 的背景,但它不必要地拉伸(stretch),使一切变得奇怪。我使用 draw9patch 创建它,并在左下角添加了一个像素,
我是一名优秀的程序员,十分优秀!