如何在div块后方显示图片？附放大镜SVG代码

嘿，要把这个放大镜SVG放到div块的后方，其实用CSS就能轻松搞定，给你几种实用的方案，看哪种更符合你的需求：

方案一：把SVG作为div的背景图 #

如果希望SVG作为div的底层背景（input等元素在SVG上方显示），可以直接把SVG转成Data URI作为div的背景图，这样代码更简洁：

<form action="" method="get">
  <div style="position: relative; 
              background: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" width=\"21px\" height=\"20px\" version=\"1.1\" style=\"shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd\"><path d=\"M19.475 18.06l-4.97-4.97a7.5 7.5 0 1 0-1.41 1.41l4.97 4.97c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41zM7.5 14C4.46 14 2 11.54 2 8.5S4.46 3 7.5 3 13 5.46 13 8.5 10.54 14 7.5 14z\" fill=\"%23999999\"/></svg>') no-repeat right 10px center; 
              padding-right: 40px;">
    <input title="Поиск" style="margin-top: 5px; margin-left: 60px; border: none; background: transparent;" type="text" class="_2z-tgin">
    <!-- 要是不需要单独的提交按钮，可以删掉下面的button标签 -->
    <!-- <button class="_1PEaSbT" type="submit" style="margin-top: 3px;margin-right: 5px"></button> -->
  </div>
</form>

关键点解释：

• 把SVG转成了Data URI，直接嵌入CSS里，不用额外的文件
• 给div设置了右侧内边距，避免输入的文字盖住背景里的SVG
• input设为透明背景，这样就能看到后方的SVG了

方案二：用绝对定位把SVG放到div内容的后方 #

如果想保留独立的SVG元素，只是让它显示在input的后方（视觉上在输入框底层），可以用CSS定位+z-index来实现：

<form action="" method="get">
  <div style="position: relative; margin-left: 60px; margin-top: 5px;">
    <!-- 把SVG从button里移出来，放到div最前面 -->
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="21px" height="20px" version="1.1" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: -1; fill: #999;">
      <path d="M19.475 18.06l-4.97-4.97a7.5 7.5 0 1 0-1.41 1.41l4.97 4.97c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41zM7.5 14C4.46 14 2 11.54 2 8.5S4.46 3 7.5 3 13 5.46 13 8.5 10.54 14 7.5 14z"/>
    </svg>
    <input title="Поиск" style="padding-right: 40px; border: 1px solid #ddd;" type="text" class="_2z-tgin">
    <button class="_1PEaSbT" type="submit" style="margin-top: 3px;margin-right: 5px">
      <!-- 这里可以留空或者放其他图标 -->
    </button>
  </div>
</form>

关键点解释：

• 给div设置position: relative，作为SVG绝对定位的参考容器
• SVG设为position: absolute，垂直居中对齐输入框，z-index: -1让它跑到input的下层
• input加右侧内边距，防止文字和SVG重叠

方案三：让SVG在整个div元素的后方（div在SVG上方） #

如果你的需求是让SVG显示在整个div的外面、底层（div完全覆盖在SVG上方），可以把SVG放在div外面，用定位和z-index控制层级：

<form action="" method="get">
  <!-- SVG放在div外面，作为底层背景 -->
  <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="50px" height="50px" version="1.1" style="position: absolute; left: 60px; top: 5px; z-index: -1; fill: #eee;">
    <path d="M19.475 18.06l-4.97-4.97a7.5 7.5 0 1 0-1.41 1.41l4.97 4.97c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41zM7.5 14C4.46 14 2 11.54 2 8.5S4.46 3 7.5 3 13 5.46 13 8.5 10.54 14 7.5 14z"/>
  </svg>
  <div style="position: relative; z-index: 1; margin-left: 60px; margin-top: 5px;">
    <input title="Поиск" style="padding: 5px; border: 1px solid #ddd;" type="text" class="_2z-tgin">
    <button class="_1PEaSbT" type="submit" style="margin-top: 3px;margin-right: 5px">
      Submit
    </button>
  </div>
</form>

关键点解释：

• SVG的z-index设为-1，div的z-index设为1，确保div在SVG上方
• 用绝对定位调整SVG的位置，让它和div对齐

内容的提问来源于stack exchange，提问作者Sergei Petrov