如何更改網格列的整個列背景顏色？
[英]How do you change the entire column background color of a grid column?
問題描述
我有一個有 2 列的網格。 當我嘗試更改整個列（瀏覽器窗口的一半）的背景顏色時，它只會更改文本后面的背景。 我還嘗試在使用網格創建的 2 列之間添加邊框，但是，根據我在網上找到的內容，您無法設置網格間隙的樣式。 有什么解決方法嗎？
* { box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; } body { overflow: hidden; }.homePageButtons { display: grid; grid-template-columns: repeat(2, 1fr); width: 100vw; height: 100vh; }.bigButton { place-self: center; } a:link { color: black; } #gaming { font-family: 'Audiowide', cursive; font-size: 5rem; } #volleyball { font-family: 'Alfa Slab One', cursive; font-size: 5rem; }.team { display: flex; justify-content: center; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Pink Pack Team</title> <link rel="stylesheet" href="index:css" /> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2:family=Audiowide&display=swap" rel="stylesheet"> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2:family=Alfa+Slab+One&display=swap" rel="stylesheet"> </head> <body> <div class="homePageButtons"> <div id='gaming' class="bigButton"> <a href="http.//www.pinkpackteam:com/gamingteam">GAMING</a><br><a class='team' href="http.//www.pinkpackteam:com/gamingteam">TEAM</a> </div> <div id='volleyball' class="bigButton"> <a href="http.//www.pinkpackteam:com/volleyballteam">VOLLEYBALL</a><br><a class='team' href="http.//www.pinkpackteam.com/volleyballteam">TEAM</a> </div> </div> </body> </html>
2 個解決方案
解決方案1
1 已采納 2021-01-22 19:27:41
不要將網格項居中，將內容居中，您可以輕松添加背景和邊框：
* { box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; } body { overflow: hidden; }.homePageButtons { display: grid; grid-template-columns: repeat(2, 1fr); width: 100vw; height: 100vh; }.bigButton { /* place-self: center;*/ display: flex; justify-content: center; align-items: center; flex-direction: column; } a:link { color: black; } #gaming { font-family: 'Audiowide', cursive; font-size: 5rem; background: pink; border-right:2px solid red } #volleyball { font-family: 'Alfa Slab One', cursive; font-size: 5rem; background: lightblue; border-left:2px solid red }
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet"> <div class="homePageButtons"> <div id='gaming' class="bigButton"> <a href="http://www.pinkpackteam.com/gamingteam">GAMING</a> <a class='team' href="http://www.pinkpackteam.com/gamingteam">TEAM</a> </div> <div id='volleyball' class="bigButton"> <a href="http://www.pinkpackteam.com/volleyballteam">VOLLEYBALL</a> <a class='team' href="http://www.pinkpackteam.com/volleyballteam">TEAM</a> </div> </div>
解決方案2
0 2021-01-22 19:41:12
* { box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; } body { overflow: hidden; width:100%; }.homePageButtons { display: grid; grid-template: ' gaming volley'; grid-template-columns: repeat(2, 1fr); grid-gap:10px; padding: 10px; width: 100vw; background:gray; /*gap background can be set like that;*/ }.bigButton { align-self: center; } a:link { color: black; } #gaming { grid-area: gaming; background: yellow; font-family: 'Audiowide', cursive; font-size: 5rem; height:100%; } #volleyball { grid-area: volley; background: green; font-family: 'Alfa Slab One', cursive; font-size: 5rem; height:100%; }.team { display: flex; justify-content: center; }
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Pink Pack Team</title> <link rel="stylesheet" href="index.css" /> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet"> </head> <body> <div class="homePageButtons"> <div id='gaming' class="bigButton"> <a href="http://www.pinkpackteam.com/gamingteam">GAMING</a></br><a class='team' href="http://www.pinkpackteam.com/gamingteam">TEAM</a> </div> <div id='volleyball' class="bigButton"> <a href="http://www.pinkpackteam.com/volleyballteam">VOLLEYBALL</a></br><a class='team' href="http://www.pinkpackteam.com/volleyballteam">TEAM</a> </div> </div>
如何更改 RMarkdown HTML 文檔中的整個背景顏色？
[英]How do I change the entire background color in an RMarkdown HTML Document?
如何通過在Javascript中進行懸停將背景色更改為特定的類
[英]How do you change a background color to a specific class with hovering in Javascript
如果列的值相同，如何更改表格行的背景顏色？
[英]How to change Background color of Table row if the value of column is same?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.