时间戳

首页 > 解决方案 > svg 响应与背景大小的图像封面

html - svg 响应与背景大小的图像封面

问题描述

我几乎完成了我的背景，但它不能正常工作，我试图让图像适合视框尺寸。我需要我的图像响应并表现得像背景尺寸：封面。我还需要让滚动条消失，我不知道它为什么在那里。有人可以帮我让我的图像适合整个视图框区域并做出响应 - 我需要它是 100% 宽度和 100% 高度并且图像被覆盖

密码笔

<svg viewBox="0 0 490 500" width="100%" height="100%">
  <defs>
    <pattern id="hexagons" width="100%" height="100%">
      <g id="svg" fill="black" x="0" y="0"></g>    
    </pattern>
    <mask id="hexagon-halftone-mask">  
     <rect x="0" y="0" width="100%" height="100%" fill="url(#hexagons)" />
   </mask>
  </defs>

  <image id="svg-bg"  xlink:href="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426_960_720.jpg" mask="url(#hexagon-halftone-mask)"/> 
</svg>

标签： htmlcsssvg

解决方案

推荐阅读