css 在两个div元素中重新创建渐变效果

neskvpey 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(158)

长话短说，我正在尝试创建一个壁纸生成器，其中我们选择两种颜色，我们将页面背景设置为渐变，并且我们有两个'cards'或div元素也具有渐变。如下所示：
x1c 0d1x的数据
我被中心的div/'card'元素和它们的实现方式卡住了，目前，我有这个

<div className="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]">
      <div className="relative w-[300px] h-[300px] bg-blue-700">
        <div className="rectangle1 absolute left-0 top-0 w-[200px] h-[200px] border-6 "></div>
        <div className="rectangle2 absolute bottom-0 right-0 w-[200px] h-[200px] border-6 "></div>
      </div>
    </div>

字符串
这个想法是，卡也有梯度效果适用于从顶部卡所有的方式，以底部卡（它应该是一个梯度上的两张卡）。但我不知道如何有梯度只在顶层元素（两个div元素的父元素）以及我如何将渐变效果混合到两个div元素中。我在这里使用顺风，但如果你有任何其他实现方式，我洗耳恭听：）。
任何帮助将不胜感激！谢谢你，新年快乐！

css

来源：https://stackoverflow.com/questions/77753776/recreating-the-gradient-effect-inside-two-div-elements

1条答案

按热度按时间

z18hc3ub1#

如果你想使用Tailwind CSS将两种颜色的渐变应用于父div并向下混合到其子div元素，你可以这样做：

<div className="absolute left-[50%] top-[50%] transform-translate-[-50%] translate-y-[-50%]">
<div className="relative w-[300px] h-[300px] bg-gradient-to-r from-blue-700 to-purple-500">
<div className="rectangle1 absolute left-0 top-0 w-[200px] h-[200px] border-6 "></div>
<div className="rectangle2 absolute bottom-0 right-0 w-[200px] h-[200px] border-6 "></div>
</div>
</div>

字符串
将'from-blue-700'和'to-purple-500'替换为你想要的开始和结束颜色。这段代码创建了一个从左到右的渐变，并将其应用于父div，向下混合到其子div元素。

赞(0）回复(0）举报 2024-01-09

我来回答

css 在两个div元素中重新创建渐变效果

1条答案

相关问题

热门标签

最新问答