我希望我的網站在背景中有重復的顏色，但我不想使用影像
例如背景可以是
紅色，白色，紅色，白色，水平重復
有可能嗎
body {
background-color: red, white;
background-repeat: repeat-x;
}
uj5u.com熱心網友回復：
您可以使用重復的背景顏色 repeating-linear-gradient()
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
div{
background: repeating-linear-gradient(to right, red 0%, white 20%, red 20%);
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>請參閱此鏈接以獲取更多資訊
uj5u.com熱心網友回復：
我不知道您真正想要達到的效果如何，但這是background-image: repeating-linear-gradient() 用于根據換行符為文本分配不同顏色的效果。
div {
--spacing: 2em;
line-height: var(--spacing);
background-image: repeating-linear-gradient(red 0 var(--spacing), blue 0 calc(var(--spacing) * 2))
}<div>For the general term, see Stack overflow and Stack overflow (disambiguation). For the parent company, see Stack Exchange.
Stack Exchange, Inc.
Stack Overflow logo.svg
Stack Overflow Home.png
Screenshot of Stack Overflow in November 2020
Type of site Knowledge market
Question and answer
Available in English, Spanish, Russian, Portuguese, and Japanese
Owner Prosus
Created by Jeff Atwood and Joel Spolsky
CEO Prashanth Chandrasekar
URL stackoverflow.com Edit this at Wikidata
Commercial Yes
Registration Optional
Launched 15 September 2008; 13 years ago[1]
Current status Online
Content license
CC BY-SA 2.5 (until April 2011)
CC BY-SA 3.0 (until May 2018)
CC BY-SA 4.0
[2]
Written in C#[3]
Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate, on 2 June 2021 for $1.8 billion.[12]</div>uj5u.com熱心網友回復：
html {
height: 100%;
}
body {
height: 100%;
background: repeating-linear-gradient(90deg,blue 0%, blue 25%, green 25%, green 50%,red 50%,red 75%,yellow 75%,yellow 100%);/*Explanation below*/
}
#content {
position: relative;
z-index: 2;
padding: 30px;
text-align: center;
font-weight: bold;
font-family: Arial, sans-serif;
}<div id="content">
<p>This is some content.</p>
</div>解釋
示例 1
假設我們有 4 種顏色[a,b,c,d]
，所以：-
變數p=100/4=25
所以我們得到 4*2= 8 values：
0
25
25
50
50
75
75
100
注意：默認前0后100，變數的每個倍數
p重復兩次
我們將這些值按
repeating-linear-gradient百分比排列
格式：
background: repeating-linear-gradient(90deg,a 0%, a 25%, b 25%, b 50%,c 50%,c 75%,d 75%,d 100%);
我們還可以觀察到，在上述格式中，結尾
a是b(25%) 的b開頭，結尾是c(50%)的開頭
如果你想要垂直顏色洗掉它
90deg,
示例 2
假設我們有 8 種顏色[a,b,c,d,e,f,g,h]
，所以：-
變數 p=100/8=12.5
所以我們得到 8*2= 16 values：
0
12.5
12.5
25
25
37.5
37.5
50
50
62.5
62.5
75
75
87.5
87.5
100
格式：
background: repeating-linear-gradient(90deg,a 0%,a 12.5%,b 12.5%,b 25%,c 25%,c 37.5%,d 37.5%,d 50%,e 50%,e 62.5%,f 62.5%,f 75%,g 75%,g 87.5%,h 87.5%,h 100%);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/416935.html
標籤：