css - 背景项目周围的“透明”边框
问题描述
关于某种透明边框有几个问题,但不是我想要的,我想。
这可能很愚蠢,但是:是否有可能以某种方式在背景(黑色纹理)上有项目(那些白色方块) ,这些项目每个都有一个边框,可以“删除”10px(或其他)边框的背景?所以你有一个连续的背景,它上面的每个项目都“切掉”了它的一部分。一个真正的“透明”边框(就像其他问题一样)显然只会让你看到背景,所以这不是我的意思。
如果不是,那么实现这样的响应式设计的方法是什么?
对不起,我不知道有什么其他的方式来解释它。谢谢你。
在此处查看示例/小提琴:jsfiddle.net/14nn2pLy
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #fd1dfa;
}
#main_header {
position: fixed;
top: 0px;
width: 100%;
height: 200px;
background: url() no-repeat center top;
background-size: contain;
}
#main_footer {
position: fixed;
bottom: 0px;
width: 100%;
height: 200px;
background: url(https://preview.ibb.co/hACMzS/background_footer.png) no-repeat center bottom;
background-size: contain;
}
#icons {
position: fixed;
bottom: 0px;
width: 900px;
height: 75px;
background: url(https://preview.ibb.co/mkPODn/footer_items.png) no-repeat center bottom;
border: 10px;
border-color: rgba( 0, 0, 0, 0);
}
<div id="main_header"></div>
<div id="main_footer">
<div id="icons"></div>
</div>
解决方案
我的思考过程
我能想到的唯一方法是使边框与背景颜色相同(在你的情况下,粉红色的阴影),但请注意,这只有在有纯色背景色的情况下才有可能。
例子:
.bg {
position: relative;
height: 250px;
width: 500px;
background-image: url(https://i.imgur.com/nRXO8xa.jpg);
}
.border {
height: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 30px;
margin: auto;
padding: 10px;
background: steelblue;
border: 10px solid black;
}
.no-border {
height: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 30px;
margin: auto;
padding: 10px;
background: steelblue;
border: 10px solid #F7F2D5;
}
<div class="bg">
<div class="border">black border</div>
<div class="no-border">"transparent" border</div>
</div>
解决方案:
clip-path
可以在背景上使用所需的效果。请注意,我也更改了 HTML 和 CSS,否则将无法正常工作。clip-path
用于基本上切掉你不想要的背景图像部分,使其变为透明,并在悬停时激活。
body,
html {
height: 100%;
margin: 0;
}
body {
background: url(https://images.unsplash.com/photo-1473662712020-75289ee3c5de);
background-size: cover;
}
.container {
height: 140px;
width: 618px;
position: relative;
top: 40%;
margin: 0 auto;
}
.bg {
height: 140px;
width: 618px;
position: relative;
}
.icon {
height: 50px;
width: 50px;
position: absolute;
top: 25.25%;
left: 38.25%;
z-index: 1;
}
.icon:hover+.bg {
clip-path: polygon(0 0, 0 100%, 44% 78.5%, 37.5% 50%, 44% 22%, 50.5% 50%, 44% 78.5%, 0 100%, 100% 100%, 100% 0);
}
<div class="container">
<div class="icon">
<img src="https://i.imgur.com/V2eI4Rm.png" alt="icon">
</div>
<div class="bg">
<img src="https://i.imgur.com/D3V3ZYq.png" alt="background">
</div>
</div>
推荐阅读
- vue.js - 我如何确保我的后端样式不会干扰前端样式(管理员/前端)
- excel - 在没有循环的特定列中获取与搜索“字符串”匹配的单元格的行号 - 列有多个匹配项
- uml - 如何在 UML 中描述运算符方法
- html - 在 laravel 中更新表(crud)时出错
- java - 将 Unicode 字符粘贴到字符串中的 IntelliJ 源代码编辑器中,而不转换为 Unicode 代码点编号
- python - 如何从浮动元素列表中找到最大元素?
- java - 如何子串这个字符串
- javascript - 角度显示测验结果?
- sql - 在 BigQuery 中使用所有字符串列的限制
- mysql - 在tomcat7中部署WAR文件时出现错误