删除背景的中间部分，仅保留边框 [英] 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>推荐答案
您可以做几件事。
只需从.klow中删除背景图像并将其设置为透明，然后使用宽度和高度以及边框宽度即可。
创建一个包含在矩形边框上的SVG矢量图形，然后在文本编辑器中打开该SVG，删除其中的任何样式，并使用
@media screen管理CSS文件中的这些值，以跨屏幕管理其高度和高度，以使其具有响应性。将SVG放置为窗帘BG，但其宽度和高度将使用@media screen管理。使用Embed选项在Inkscape等矢量图形编辑器中导入BG图像，使用您选择的边框颜色和边框宽度创建一个矩形，不填充，然后将所有内容导出为SVG。然后将该SVG用作html或正文的BG。
如果以上任何一项符合您的需要，请重新表述您的问题，以寻求更好/不同的方法。
我花了一段时间，使用上面提到的第一种方法修复了它。现在它有反应了。让我们看看它是否符合您的需要。
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>这篇关于删除背景的中间部分，仅保留边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
