如何以相同的背景颜色在 div 顶部制作元素？

Question

我正在尝试为我的网站创建一个与背景颜色相同的按钮，即使它的大小发生变化。 基本上，按钮位于具有白色背景的div顶部，即位于具有渐变背景色的body顶部。 当我按下按钮时，它的大小（比例）会发生变化，我希望它看起来像 div 中的一个切口/窗口，它将显示背景颜色。 我试图做的是让它渐变，但是当它调整大小时 - 按钮的渐变背景也会调整大小。 而且那个解决方案是不优雅的......

我引用的代码：

 function chg() { document.getElementById("main_div").style.width = "80%"; document.getElementById("catch_div").style.right = "7%"; document.getElementById("enter_div").style.left ="4%"; }

 html,body, #main_div{ height: 100%; overflow: hidden } body { background-color: #1862A1; background-image: linear-gradient(90deg, #1862A1, #8529B1); padding-bottom: 0; padding-top: 0; margin: 0; } #main_div{ height: 100%; width: 100%; transition:all 0.3s ease-in-out; background-color: white; }.logo{ width: 48.125vw; height: 22.3046875vw; } #catch_div{ right: 40%; position: relative; transition:all 0.3s ease-in-out; margin-top: -3vw; } #enter{ display: block; width: 6vw; height: 6vw; box-shadow: 0 0 0 1px #fff; text-align: center; line-height: 136px; border-radius: 100%; text-decoration: none; transition: all 250ms; outline: 0; background-color: transparent; border: 1px solid red; } #enter:active{ transform: scale(.90); } #enter:active #VButton { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; } #enter_div{ left: 40%; position: relative; transition:all 0.3s ease-in-out; margin-top: 3vw; }.catchphrase{ font-family: Niconne; font-size: 3.5vw; font-weight: 400; color: #1761A0; } #cspan{ background: -webkit-linear-gradient(to right, #1761A0 0%, #6B38B0 110%); background: -moz-linear-gradient(to right, #1761A0 0%, #6B38B0 110%); background: linear-gradient(to right, #1761A0 0%, #6B38B0 110%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background: linear-gradient(90deg, #1862A1, #8529B1) center fixed; background-size: cover; -webkit-text-fill-color: transparent; -webkit-background-clip: text; } #VButton{ width: 5.33vw; height: 5.33vw; margin-left: 0vw; margin-top:0.31vw; position:relative; }

 <body onload="chg()"> <form id="form1" runat="server"> <center> <div style="min-height: 100vh;" id="main_div"> <asp:Image runat="server" ImageUrl='~/BETTER_logo.png' ID="logo" CssClass="logo"></asp:Image> <div id="catch_div"><asp:Label ID="Label1" runat="server" Text="Label" CssClass="catchphrase">Feel <span id="cspan">the rythem</span></asp:Label></div> <div id="enter_div"> <button type="button" id="enter"> <center><img src="VButton.png" id="VButton"></center> <!-- problem --> </button> </div> </div> </center> </form> </body>

这样的事情可能吗？ 任何人都有他可以指出我的方向吗？ 尝试在网上寻找接近的东西，但没有运气，我将不胜感激

编辑：我希望切口能够移动，以便将来我能够使用我的 JS 代码在我的网站中创建动画。

Answer 1

您可以在白色 div 中创建一个“洞”，然后将按钮（具有透明背景）放在其上，并在单击时对其进行缩放。 这样，主体的背景图像将始终显示出来，您不必担心按钮的背景。

创建一个洞的方法是给白色 div 一个径向渐变，放置在您想要按钮的位置，第一部分透明，然后白色到边缘。

这是一个小例子，宽度等参数在 CSS 变量中，以便于玩耍。 显然把你自己的身体背景和你自己的维度。

更新问题扩大到询问如何移动洞。 这里的方法是移动 whitediv - 我们将其设置为实际在屏幕上看到的尺寸的两倍，以便在移动时可视部分保持白色。

请注意，白色顶部的任何其他元素都需要从 whitediv 中取出并显示在它上面，这样它们就不会随着孔的移动而移动。

如果单击孔，则演示会简单地扩展/收缩孔，如果单击白色部分，则“移动”孔[这最后一点仅用于演示]。 单击白色部分以查看“飞入”孔。

 const button = document.querySelector('.enter'); const whitediv = document.querySelector('.whitediv'); let n = 0; //just for a test to move the hole (whitediv) around button.addEventListener('click', function (ev) { ev.stopPropagation(); whitediv.style.transform = whitediv.style.transform.includes('scale(1)')? whitediv.style.transform.replace('scale(1)', 'scale(var(--s))'): whitediv.style.transform.replace('scale(var(--s))', 'scale(1)'); }); //just for a demo we move the hole around a little bit if the whitediv is clicked whitediv.addEventListener('click', function (ev) { n = (n+1)%3; whitediv.style.transform = 'translateX(-' + (10*n) +'%) translateY(-' + (10*n) +'%) scale(1)'; });

 * { padding: 0; margin: 0; box-sizing: border-box; } body { background-image: linear-gradient(red,orange,yellow,green,blue,indigo,violet); width: 100vw; height: 100vh; }.container { --x: 30%; /* distance from the left of the white div to center of the hole */ --y: 40%; /* distance from the top to the center of the hole */ --d: 10vmin; /* the diameter of the hole to start with */ --s: 2; /* the scaling factor - factor by which the hole will expand on clicking */ --w: 40vw; /* width of the white div */ --h: 40vh; /* height of the white div */ --top: 10%; /* position of the white div */ --left: 20%; position: relative; top: var(--top); left: var(--left); width: var(--w); height: var(--h); overflow: hidden; border: 4px white; }.whitediv { position: relative; width: 100%; width: 200%; height: 100%; height: 200%; background-image: radial-gradient(circle at var(--x) var(--y), transparent 0%, transparent calc(var(--d) / 2), white calc(var(--d) /2), white 100%); transition: all 2s; transform: scale(1) translateX(-50%) translateY(-50%); transform-origin: var(--x) var(--y); overflow: hidden; }.enter { background-color: transparent; height: var(--d); width: var(--d); position: relative; top: var(--y); left: var(--x); transform: translateX(-50%) translateY(-50%) scale(1); border-radius: 50%; border-style: none; }

 <div class="container"> <div class="whitediv"> <div class="enter"> </div> </div> </div>

Answer 2

这里有两种方法可以做你想做的事：

您可以使用按钮创建一个 div。 你给 div 一个背景颜色。 在这种情况下，它是蓝色的。 然后你给按钮背景颜色transparent ，使按钮透明，背景颜色取自 div。 这有点难以解释。 因此这里是一个例子：

 div { background: blue; width: 300px; height: 300px; } button { background: transparent; color: white; /* The button has a white colour to make it easier to see. /* }

 <h2>The background colour of the button was taken from the div</h1> <div> <button>Hello World!</button> </div>

那么还有第二种可能。 您可以同时处理 div 和按钮。 为此，您必须用,分隔属性。

这是一个例子：

 div { height: 50px; width: 100px; } /* giving both a background color */ div, button { background: red; }

 <div> <button>Hello World</button> </div> <h2>Even if the button is not in the div, it has the same background colour.</h2> <button>Second Button</button> <br> <br> <button>Third Button</button>

如何以相同的背景颜色在 div 顶部制作元素？

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-02-20 23:05:40

解决方案2
0 2021-02-20 20:09:06

如何以相同的背景颜色在 div 顶部制作元素？

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-02-20 23:05:40

解决方案2 0 2021-02-20 20:09:06

解决方案1
1 已采纳 2021-02-20 23:05:40

解决方案2
0 2021-02-20 20:09:06