英文:
Use a background-image: linear-gradient (or image) with a container of divs where only the divs show the background and the space around remains white
问题
新的前端开发者。我正在尝试使用 flex-box 或 grid（在此示例中为 grid 容器）创建一个包含 div 的容器，只有 div 显示背景图像，而我希望容器的其余部分是白色。这里有一个类似的问题/答案：
但如果你想在 div 内使用一个网格或 flex 容器并希望使用边框半径，那么这不起作用。
我尝试了两个图层的绝对定位，z-index，background-clip，background-color: transparent，并考虑了一个覆盖层，但无法解决这种情况。我去掉了 div 的顶层容器的边框，只是为了显示有两个图层。如果你为顶部容器添加 z-index，你可以看到我想要实现的效果，但我无法使 div 变成透明（而周围的空间是白色的），并显示底下的颜色。
body {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container-bottom-layer {
position: absolute;
display: grid;
grid: auto-flow / 1fr 1fr 1fr;
background-image: linear-gradient(90deg, yellow, purple);
border-radius: 15px;
padding: 20px;
border: 1px solid black;
z-index: 1;
}
.container-item-bottom {
margin: 15px;
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 10px;
}
.container-top-layer {
position: absolute;
display: grid;
grid: auto-flow / 1fr 1fr 1fr;
background-color: white;
padding: 15px;
}
.container-item-top {
margin: 15px;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: transparent;
z-index: 2;
}
<body>
<div class="container-bottom-layer">
<div class="container-item-bottom"></div>
<div class="container-item-bottom"></div>
<div class="container-item-bottom"></div>
<div class="container-item-bottom"></div>
<div class="container-item-bottom"></div>
<div class="container-item-bottom"></div>
<div class="container-item-bottom"></div>
<div class="container-item-bottom"></div>
<div class="container-item-bottom"></div>
</div>
<div class="container-top-layer">
<div class="container-item-top"></div>
<div class="container-item-top"></div>
<div class="container-item-top"></div>
<div class="container-item-top"></div>
<div class="container-item-top"></div>
<div class="container-item-top"></div>
<div class="container-item-top"></div>
<div class="container-item-top"></div>
<div class="container-item-top"></div>
</div>
</body>
英文:
New Front-ender here. I am trying to create a container full of divs using flex-box or grid (grid container flexed in this example) where only the divs show the background-image and I want the rest of the container to be white. There is a similar question/answer here:
but this won't work if you want to use a grid with divs inside or a flex container and want to use border-radius.
I have tried absolute positioning of two layers, z-index, background-clip, background-color: transparent and also thought about an overlay but couldn't work through that scenario.
I left the borders off the top layer container of divs just to show that there are two layers. If you add in the z-index for the top-container you can kind of see what I'm trying to get but I can't get the divs to become transparent (while the space around is white) and shows the color underneath.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container-bottom-layer {
position: absolute;
display: grid;
grid: auto-flow / 1fr 1fr 1fr;
background-image: linear-gradient(90deg, yellow, purple);
border-radius: 15px;
padding: 20px;
border: 1px solid black;
z-index: 1;
}
.container-item-bottom {
margin: 15px;
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 10px;
}
.container-top-layer {
position: absolute;
display: grid;
grid: auto-flow / 1fr 1fr 1fr;
background-color: white;
padding: 15px;
/* background-clip: padding-box; */
/* background-clip: padding-box; */
/* -webkit-background-clip: padding-box; */
/* color: transparent; */
/* z-index: 1; */
}
.container-item-top {
margin: 15px;
width: 100px;
height: 100px;
border: 1px solid black;
/* background-clip: content-box; */
/* -webkit-background-clip: content-box; */
background-color: transparent;
z-index: 2;
}
<!-- language: lang-html -->
<body>
<div class="container-bottom-layer">
<div class="container-item-bottom"></div>
<div class="container-item-bottom"></div>
<div class="container-item-bottom"></div>
<div class="container-item-bottom"></div>
<div class="container-item-bottom"></div>
<div class="container-item-bottom"></div>
<div class="container-item-bottom"></div>
<div class="container-item-bottom"></div>
<div class="container-item-bottom"></div>
</div>
<div class="container-top-layer">
<div class="container-item-top"></div>
<div class="container-item-top"></div>
<div class="container-item-top"></div>
<div class="container-item-top"></div>
<div class="container-item-top"></div>
<div class="container-item-top"></div>
<div class="container-item-top"></div>
<div class="container-item-top"></div>
<div class="container-item-top"></div>
</div>
</body>
<!-- end snippet -->
答案1
得分: 1
不需要创建复杂的叠加结构。您的 grid items（在片段中为 .grid > *）需要共享相同的 fixed background-image：
.grid > * { background-image: your gradient; background-attachment: fixed }- 对于共享的图像，您可能需要根据所使用的图像大小添加
background-size、background-cover和background-repeat。
对于这个片段，我分解了您的原始代码并删除了所有过时的代码：
/* 网格项背景设置，共享渐变 */
.grid > * {
background-image: linear-gradient(90deg, yellow, purple);
background-attachment: fixed; /* [强制] */
background-size : cover; /* 与图像结合使用时 */
background-position : center; /* 根据需要调整 */
background-repeat : no-repeat; /* 对于非常小的图像 */
/* background-blend-mode: normal; /* 与图像结合使用时 */
}
/*******************/
/* 演示网格设置 */
/*******************/
* { box-sizing: border-box }
body {
display: flex; flex-wrap: wrap;
justify-content: center; align-items: center;
margin: 0; height: 100vh;
}
.grid { /* 网格容器 */
display: grid;
grid: auto-flow / 1fr 1fr 1fr;
padding: 20px;
border-radius: 15px;
}
.grid > * { /* 网格项 */
margin: 15px;
width: 100px;
height: 100px;
border-radius: 10px;
}
.grid, .grid > * { border: 1px solid black }
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
英文:
There is no need to create a complicated overlay structure. Your grid items (.grid > * in the snippet) need to share the same fixed background-image:
.grid > * { background-image: your gradient; background-attachment: fixed }- for a shared image you might need to add
background-size,background-coverandbackground-repeat, depending on the size of the image used.
For the snippet I ripped your original code apart and removed all obsolete code:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
/* Grid items background setup, shared gradient */
.grid > * {
background-image: linear-gradient(90deg, yellow, purple);
background-attachment: fixed; /* [MANDATORY] */
background-size : cover; /* When combined with image */
background-position : center; /* Toy with this */
background-repeat : no-repeat; /* For very small images */
/* background-blend-mode: normal; /* When combined with image */
}
/*******************/
/* Demo grid setup */
/*******************/
* { box-sizing: border-box }
body {
display: flex; flex-wrap: wrap;
justify-content: center; align-items: center;
margin: 0; height: 100vh;
}
.grid { /* grid container */
display: grid;
grid: auto-flow / 1fr 1fr 1fr;
padding: 20px;
border-radius: 15px;
}
.grid > * { /* grid items */
margin: 15px;
width: 100px;
height: 100px;
border-radius: 10px;
}
.grid, .grid > * { border: 1px solid black }
<!-- language: lang-html -->
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论