背景梯度跨越多个CSS网格区域

-2

*  * *  * 
*********** *********** 
* Area1 * * Area2 * 
*********** *********** 
*  * *  *

两个区域1和区域2的div元素。我想添加横跨Area1和Area2的背景渐变。这可能吗？

我可以用另一个跨越Area1和Area2的元素包围它们，但是我不能把子元素放在这个网格布局中。

我正在寻找一种方式来设计多个网格区域而不嵌套元素。

来源

2017-10-06 bkolobara

是，它几乎肯定成为可能;尽管实现目标的最佳方式取决于您使用的HTML和CSS。因此，如果你想要你和其他未来的访问者可以学习的切实可行的答案，请提供一些“* [mcve] *”代码，以便我们重现你的情况。理想情况下，在解决方案中共享您希望看到的图像（如果仅用作演示）。 –

所关乎https://stackoverflow.com/questions/46308048/how-to-target-a-specific-column-or-row-in-css-grid-layout –

如果它是一个线性渐变，那么你应该能够把它分成两半（两个独立的梯度，每个元素一次），它们在中间以相同的颜色相遇。 – DBS

不...... CSS电网领域是不是DOM元素，所以不能选择或CSS样式

然而，CSS电网，源顺序是不相关的元素都可以在相同的“空间”，分层使用z-index而不使用使用定位。因此，跨越区域的“造型格”（震动）是可能的。

.container { 
 
    display: grid; 
 
    grid-template-columns: 1fr 2fr 1fr 1fr; 
 
    grid-gap: 1em; 
 
    width: 80%; 
 
    margin: auto; 
 
    border: 1px solid red; 
 
} 
 

 
.container div { 
 
    height: 175px; 
 
    border: 1px solid grey; 
 
    font-size: 2em; 
 
    color:white; 
 
} 
 

 
.one { 
 
    grid-row: 1; 
 
    grid-column: 2/3; 
 
} 
 

 
.two { 
 
    grid-row: 1; 
 
    grid-column: 3/4; 
 
} 
 

 
.gradient { 
 
    grid-column: 2/4; 
 
    grid-row: 1; 
 
    background: linear-gradient(to right, green, blue); 
 
    z-index: -1; 
 
}

<div class="container"> 
 
    <div class="one">Div 1</div> 
 
    <div class="two">Div 2</div> 
 
    <div class="gradient"></div> 
 
</div>

来源

2017-10-06 15:35:43

谢谢。我试图避免引入额外的元素，但看起来没有办法绕过它。 – bkolobara

根据您的具体要求，您可以*使用容器div上的伪元素执行此操作。 –

背景梯度跨越多个CSS网格区域

回答

相关问题