带遮罩的全宽图像

Posted 2023-03-06

【中文标题】带遮罩的全宽图像

【英文标题】：Full width image with mask

【发布时间】：2015-12-18 03:02:00

【问题描述】：

我有一个带有图像标题（全角）的响应式网站。在该图像之上，我有一个 SVG 蒙版，我有这个，所以我在标题的底部有一个类似绘画的外观。问题是，我的图像没有缩放以适应宽度。我希望它是 100% 宽和 700px 高（或者像覆盖它的父级，就像你通常做的那样：背景大小：覆盖）。

这就是我想要的：

这就是我迄今为止所取得的成就（图像不同但没关系：

这就是我需要刷子的原因：

我正在使用的代码：

<div class="cover">
        <svg   baseProfile="full" version="1.2">
            <defs>
                <mask id="svgmask2" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" transform="scale(1)">
                    <image   xlink:href="/images/brush-header.png" />
                </mask>
            </defs>
            <image id="the-mask" mask="url(#svgmask2)"   y="0" x="0" xlink:href="/images/header-image.png" />
        </svg>
    </div>

cover 有 css 的地方：

.cover
  height: 700px;
  width: 100%;

我想要的： - 图片的宽度必须为100%，遮罩必须覆盖整个图片宽度，画笔不能是顶部的图片：我想看到标题后面的网站内容，就像你在第二张图片中看到的那样.

图片尺寸： 1920x1256 刷子尺寸： 1422x721

【问题讨论】：

尝试使用background-size: cover;，也许可以解决问题。

width="100%" 将图像的宽度设置为 100%。如果图像是 200px 宽，它将是 200px 宽，并且不会填满整个浏览器窗口。

有没有办法让它填满宽度？ （就像 background-size: cover 如果它是没有蒙版的背景一样；））

@BartBurg 会 this 回答您评论中的问题吗？

【参考方案1】：

把它放在你的 CSS 样式中

 #the-mask 
      position: fixed; 
      top: 0; 
      left: 0; 

      /* Preserve aspet ratio */
      min-width: 100%;
      min-height: 100%;
    

或

你可以用它来应用它全屏背景图片

html  
  background: url(/images/header-image.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

【讨论】：

如果我只想要一张没有遮罩的全宽图像，它确实有效，但遮罩很重要。我想要底部的刷状饰面。

将该笔刷应用到一个 div 并使用 z-index 将其放在前面并使其透明。

【参考方案2】：

如果您希望 SVG 缩放以适应其容器 (cover)，您需要告诉浏览器 SVG 的内容有多大。如果它不知道它有多大，它就无法缩放 SVG。

您可以使用 viewBox 属性来做到这一点。

您没有提供任何关于您的图片有多大的信息。但假设，为了这个例子，它是 1024x768。然后将您的 SVG 根标签更改为：

<svg  viewBox="0 0 1024 768">

您可能还想更改preserveAspectRatio 属性，使其位于容器的顶部：

<svg  viewBox="0 0 1024 768" preserveAspectRatio="xMidYMin meet">

更新

下面是一个缩放 400x200 图像以适应页面的示例。

body 
  margin: 0;


.cover 
  height: 700px;
  width: 100%;

<div class="cover">
    <svg  viewBox="0 0 400 200" preserveAspectRatio="xMidYMin meet">
        <image id="the-mask" mask="url(#svgmask2)"   y="0" x="0" xlink:href="http://lorempixel.com/400/200/" />
    </svg>
</div>

【讨论】：

您的回答似乎合乎逻辑，但您能给我举个小例子吗？我的仍然没有缩放以覆盖其容器。非常感谢！

【参考方案3】：

非常感谢 Paul LeBeau 和 this overflow answer，我发现我的画笔和图像都需要具有相同的尺寸。结合正确设置的 viewBox 尺寸，我设法解决了这个问题！

代码：

<svg   baseProfile="" version="1.2" preserveAspectRatio="xMinYMax slice" viewBox="0 0 1920 1256">
            <defs>
                <mask id="svgmask2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)">
                    <image   xlink:href="/images/brush-header3.png" /> 
                </mask>
            </defs>
            <image id="the-mask" mask="url(#svgmask2)"   y="0" x="0" xlink:href="<?= $s_Background ?>" />
        </svg>