“透明的"背景项目周围的边框 [英] "Transparent" border around items on background

问题描述

关于某种透明边框，有几个问题，但我想的不是我要的.

There have been several questions regarding some kind of transparent border but not what I am looking for, I think.

这可能是非常愚蠢的，但是:是否可能以某种方式在背景(黑色纹理)上放置项目(那些白色正方形)，而这些项目每个都有一个移除"边界10像素(或其他像素)边框的背景?因此，您拥有连续的背景，并且位于其顶部的每个项目都切出"了背景.它的某些部分.真正的透明"标志边框(像其他问题一样)显然只会让您看到背景，所以这不是我的意思.

It might be very stupid but: Is it possible somehow to have items (those white squares) on a background (the black texture) with those items each having a border that "remove" the background for a 10px (or whatever) border? So you have a continuous background and each item on top of it "cuts out" some part of it. A true "transparent" border (like other questions) obviously would just let you see the background, so that is not what I mean.

如果没有，那么实现这样的响应式设计的方法是什么?

If not, what would be the way to achieve a responsive design like that?

对不起，我不知道有什么其他方式可以解释它.谢谢.

Sorry, I don't know any other way to explain it. Thank you.

在此处查看示例/小提琴: jsfiddle.net/14nn2pLy

See example/fiddle here: 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>

推荐答案

我的思考过程

我能想到的唯一方法是使边框与背景具有相同的颜色(在您的情况下为粉红色阴影)，但是请注意，只有在背景为纯色的情况下才有可能.

My thought process

The only way I can think of is to make the border the same color as the background (in your case, that shade of pink), but note that this is only possible if there is a solid background color.

示例:

.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 用于基本上剪切不需要的背景图像部分，从而使其成为透明，并且它会在悬停时激活.

The desired effect is possible using clip-path on the background. Notice that I've changed the HTML and CSS too, otherwise it wouldn't work. The clip-path is used to basically cut out the part of the background image you don't want, so that it becomes transparent, and it is activated on hover.

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>

这篇关于“透明的"背景项目周围的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！