Removing the middle of the background, keeping only the border(删除背景的中间部分，仅保留边框)

本文介绍了删除背景的中间部分，仅保留边框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

可以这样做吗？

如何使背景中部完全透明？

这将使中间部分透明，并且不会对其应用任何内容。

https://jsfiddle.net/racsob9v/

现在看起来是这样的。

我正在尝试执行此操作。

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

.curtain {
  max-width: 640px;
  margin: auto;
  border: 15px solid transparent;
  border-radius: 12px;
  background: linear-gradient(to bottom right, gray, black), url("https://i.imgur.com/pwdit9N.png"), linear-gradient(to bottom right, #eee, #ccc);
  background-origin: padding-box, border-box, border-box;
  background-clip: padding-box, border-box, border-box;
  box-shadow: 0 -1px white, 0 -1px 0 1px #bbb, 0 2px 0 1px #aaa, 0 2px 10px 1px rgb(0 0 0 / 20%);
}

.curtain-ratio-keeper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  background: transparent;
}
<div class="outer">
  <div class="tcell">


    <div class="curtain">
      <div class="curtain-ratio-keeper">


      </div>
    </div>
  </div>
</div>

推荐答案

您可以做几件事。

  1. 只需从.klow中删除背景图像并将其设置为透明，然后使用宽度和高度以及边框宽度即可。

  2. 创建一个包含在矩形边框上的SVG矢量图形，然后在文本编辑器中打开该SVG，删除其中的任何样式，并使用@media screen管理CSS文件中的这些值，以跨屏幕管理其高度和高度，以使其具有响应性。将SVG放置为窗帘BG，但其宽度和高度将使用@media screen管理。

  3. 使用Embed选项在Inkscape等矢量图形编辑器中导入BG图像，使用您选择的边框颜色和边框宽度创建一个矩形，不填充，然后将所有内容导出为SVG。然后将该SVG用作html或正文的BG。

这些方法中的每一种都适合不同的目的。对我来说，如果BG图像是动态更改的，那么第一个和第二个选项更适合这个目的。但如果您的BG将是静电，那么第三个将是最佳选择，请始终记住使用@media screen来使其在管理矩形路径的宽度和高度时具有响应性。

如果以上任何一项符合您的需要，请重新表述您的问题，以寻求更好/不同的方法。

我花了一段时间，使用上面提到的第一种方法修复了它。现在它有反应了。让我们看看它是否符合您的需要。

    html,
    body {
    height: 100%;
    padding: 0;
    margin: 0;
    }
    body {
    background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
    background-attachment: fixed;
    background-size: cover;
    }
    .outer {
    display: table;
    height: 100%;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    }
    .tcell {
    display: table-cell;
    vertical-align: middle;
    padding: 8px 8px;
    }
    .curtain {
    margin: auto;
    border: 15px solid rgba(169, 169, 169, 0.7);
    border-radius: 12px;
    background: transparent;
    background-origin: padding-box, border-box, border-box;
    background-clip: padding-box, border-box, border-box;
    }

    .curtain-ratio-keeper {
    position: relative;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
    background: transparent;
    border: 2px solid rgba(70, 70, 70, 0.8);
}
    .curtain-out-ratio-keeper {
    position: relative;
    height: 50%;
    overflow: hidden;
    background: transparent;
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.8);
}
    <!DOCTYPE html>
    <html class="with-statusbar-overlay" lang="es"><head><meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=5, user-scalable=yes, width=device-width">
    </head>
    <body>
    <div class="outer"><div class="tcell"><div class="curtain-out-ratio-keeper"><div class="curtain"><div class="curtain-ratio-keeper">
    </div></div></div></div></div>
    </body>
    </html>

这篇关于删除背景的中间部分，仅保留边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！