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

Question

I'm trying to create a button for my website that has the same color as the background, even when its size changes.我正在尝试为我的网站创建一个与背景颜色相同的按钮，即使它的大小发生变化。 Basically, the button is on top of a div with white background, that is on top of the body which has gradient background-color.基本上，按钮位于具有白色背景的div顶部，即位于具有渐变背景色的body顶部。 When I press on the button, its size (scale) changes, and I want it to seem like a cutout/window in the div, that will display the background color.当我按下按钮时，它的大小（比例）会发生变化，我希望它看起来像 div 中的一个切口/窗口，它将显示背景颜色。 What I tried to do is to make it gradient, but when it resizes - the gradient background of the button resizes as well.我试图做的是让它渐变，但是当它调整大小时 - 按钮的渐变背景也会调整大小。 Also that solution is inelegant...而且那个解决方案是不优雅的......

My cite's code:我引用的代码：

 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>

Is something like that even possible?这样的事情可能吗？ Anyone has a direction that he can point me into?任何人都有他可以指出我的方向吗？ Tried looking online for something close, but with no luck, I would appreciate any help尝试在网上寻找接近的东西，但没有运气，我将不胜感激

EDIT: I would love for the cut out to be able to move, so that I'll be able to create animations in my site in the future with my JS code.编辑：我希望切口能够移动，以便将来我能够使用我的 JS 代码在我的网站中创建动画。

Answer 1

You could create a 'hole' in the white div and place the button (with a transparent background) over it and scale them when clicked.您可以在白色 div 中创建一个“洞”，然后将按钮（具有透明背景）放在其上，并在单击时对其进行缩放。 That way the background image of the body will always show through and you don't have to worry about the button's background.这样，主体的背景图像将始终显示出来，您不必担心按钮的背景。

The way to create a hole is to give the white div a radial gradient, positioned where you want the button and with the first part transparent, and then white to the edge.创建一个洞的方法是给白色 div 一个径向渐变，放置在您想要按钮的位置，第一部分透明，然后白色到边缘。

Here is a small example, the parameters for width etc are in CSS variables to make it easy to play around.这是一个小例子，宽度等参数在 CSS 变量中，以便于玩耍。 Obviously put your own backgrounds for the body in and your own dimensions.显然把你自己的身体背景和你自己的维度。

UPDATE the question was expanded to ask how to move the hole.更新问题扩大到询问如何移动洞。 The method here is to move the whitediv - we make it twice the dimensions of those that are actually seen on the screen so that as it moves the viewable part remains white.这里的方法是移动 whitediv - 我们将其设置为实际在屏幕上看到的尺寸的两倍，以便在移动时可视部分保持白色。

Note any other elements that are on top of the white need to be taken out of whitediv and displayed over it so they don't move as the hole moves.请注意，白色顶部的任何其他元素都需要从 whitediv 中取出并显示在它上面，这样它们就不会随着孔的移动而移动。

The demo simply expands/contracts the hole if the hole is clicked on and 'moves' the hole if the white part is clicked on [this last bit just for a demo].如果单击孔，则演示会简单地扩展/收缩孔，如果单击白色部分，则“移动”孔[这最后一点仅用于演示]。 Click the white part to see the hole 'fly in'.单击白色部分以查看“飞入”孔。

 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

Here are two ways to do what you wanted to do:这里有两种方法可以做你想做的事：

You could create a div with a button.您可以使用按钮创建一个 div。 You give the div a background colour.你给 div 一个背景颜色。 In this case it is blue.在这种情况下，它是蓝色的。 Then you give the button the background colour transparent to make the button transparent and the background colour is taken from the div.然后你给按钮背景颜色transparent ，使按钮透明，背景颜色取自 div。 It is a bit difficult to explain.这有点难以解释。 Therefore here is an example:因此这里是一个例子：

 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>

Then there is a second possibility.那么还有第二种可能。 You can address the div and the button at once.您可以同时处理 div 和按钮。 To do this, you have to separate the properties with a , .为此，您必须用,分隔属性。

Here is an example:这是一个例子：

 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