15個引人注目的CSS背景設計

一、線性漸變背景

線性漸變背景是一種常用的背景設計，它可以呈現出明亮或深沉的色彩。下面是一個簡單的線性漸變背景代碼示例：

background: linear-gradient(to bottom, #f5af19, #f12711);

這段代碼表示從上到下一個漸變：從黃色（#f5af19）到紅色（#f12711）的漸變。

除了指定方向，線性漸變背景還可以指定多個顏色和位置，從而創建更複雜的背景效果。

二、徑向漸變背景

徑向漸變背景可以創建出一個類似太陽或水波紋的效果。以下是一個簡單的徑向漸變背景代碼示例：

background: radial-gradient(circle, #f5af19, #f12711);

這段代碼使用了radial-gradient()函數創建一個圓形的徑向漸變，從黃色（#f5af19）到紅色（#f12711）

三、重複背景

重複背景是一種經典的CSS設計，它可以通過製作背景圖片來實現。下面是一個簡單的重複背景代碼：

background-image: url("bg-pattern.png");
background-repeat: repeat;

這段代碼指定了一個名為bg-pattern.png的圖片作為背景圖片，並將其重複到整個元素中。

除了repeat之外，還有repeat-x和repeat-y兩個屬性值，分別用於水平和垂直方向上的重複。

四、背景圖案

為網站添加有趣的背景圖案是一種非常受歡迎的設計趨勢。以下是一個背景圖案的示例：

background-image: url("bg-pattern.png");
background-repeat: repeat;
background-attachment: fixed;

這段代碼中，背景圖案同樣是通過指定一個圖片並將其重複來實現的。另外，還通過background-attachment屬性指定背景位置為固定，這樣即使用戶滾動網頁，背景圖案仍將保持在同一位置。

五、背景模糊

背景模糊是一種現代化的背景設計，可以將網頁視覺效果提高到一個新的高度。以下是一個簡單的背景模糊代碼：

background-image: url("bg-image.jpg");
filter: blur(5px);

這段代碼中，利用CSS的filter屬性可以模糊圖片背景。在這個例子中，背景圖片被模糊了5像素。

六、光暈背景

光暈背景是一種獨特的效果，可以給網站添加一種神秘的氛圍。以下是一個簡單的光暈背景代碼：

&::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   background: radial-gradient(circle, #FFF, #000);
   opacity: 0.5;
}

這段代碼中，使用偽元素(::before)的方式創建一個光暈效果。通過設置z-index使其位於元素背後，使用徑向漸變創建光暈效果，通過opacity屬性使其半透明。

七、漸變紋理背景

漸變紋理背景是一種非常流行的背景設計，可以為網站添加一種紋理效果。以下是一個簡單的漸變紋理背景代碼：

background-image: linear-gradient(45deg, #FFF 25%, #000 25%, #000 50%, #FFF 50%, #FFF 75%, #000 75%);
background-size: 20px 20px;

這段代碼中，使用了CSS的background-image屬性和linear-gradient()函數，創建了一個45度的斜向漸變背景。將背景切分為20×20像素的大小，並將其反覆出現，產生了一個紋理效果。

八、背景動畫效果

背景動畫效果是一種將網站設計提高到另一個水平的方式。以下是一個簡單的背景動畫效果代碼：

@keyframes bg {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

body {
  background-image: linear-gradient(to right, #000, #333, #000);
  background-position: 0 0;
  background-repeat: repeat-x;
  animation: bg 10s linear infinite;
}

這段代碼使用了CSS的@keyframes規則和animation屬性來創建一個背景動畫。通過linear-gradient()函數創建一個漸變背景，再配合background-position屬性和animation屬性，讓背景在水平方向上無限滾動。

九、背景濾鏡

背景濾鏡可以改變網站背景的色調，讓網站呈現出更加有趣的視覺效果。以下是一個簡單的背景濾鏡代碼示例：

background-image: url(bg-image.jpg);
filter: grayscale(100%);

這段代碼將背景圖片變成了黑白圖像，實現了一種有趣的視覺效果。

十、背景模式切換

通過切換不同的背景模式，可以讓網站呈現出完全不同的視覺效果。以下是一個簡單的背景模式切換代碼：

button {
  background: #FFF;
  color: #000;
}

button:hover {
  background: #000;
  color: #FFF;
}

這段代碼使用了CSS:hover偽類，使得當鼠標懸停在按鈕上時，背景和文字顏色會發生切換。這種切換效果可以使用在全站中，實現一個有趣的背景模式切換效果。

十一、背景半透明效果

背景半透明效果可以讓網站的內容和背景之間呈現出更加流暢的過渡。以下是一個簡單的背景半透明效果代碼：

.container {
  background-color: #FFF;
  opacity: 0.8;
}

這段代碼給容器元素設置了背景色，並在這個背景上疊加了一層半透明效果，呈現出一種更加流暢的視覺效果。

十二、背景過渡效果

背景過渡效果可以讓網站背景發生平滑的過渡，從而創建一種更加有趣的視覺效果。以下是一個簡單的背景過渡效果代碼：

body {
  background-image: url(bg-image1.jpg);
  transition: background-image 1s ease-in-out;
}

body:hover {
  background-image: url(bg-image2.jpg);
}

這段代碼使用了CSS的transition屬性和:hover偽類來為網站背景添加了過渡效果，當鼠標懸停在網站上方時，背景圖片會從一張過渡到另一張。

十三、背景調整

通過背景調整，可以改變網站背景的色調和亮度，從而使其呈現出完全不同的視覺效果。以下是一個簡單的背景調整代碼：

body {
  background-image: url(bg-image.jpg);
  filter: brightness(50%);
}

這段代碼中，使用了CSS的filter屬性將圖片的亮度降低了50%，呈現出一種暗淡的效果。

十四、破碎背景

破碎背景是一種非常獨特的設計，並可以為網站提供一種獨特的視覺效果。以下是一個簡單的破碎背景代碼：

&::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(bg-image.jpg) center center no-repeat;
  transform: rotate(3deg) scaleX(1.2) scaleY(0.9);
  clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 30% 100%, 0% 50%);
}

這段代碼中，使用偽元素的方式創建了一塊破碎的背景。通過CSS的clip-path屬性，使用polygon()函數定義了五邊形的形狀，使用transform屬性旋轉過後，呈現了一種破碎的效果。

十五、隨機背景顏色

利用JavaScript可以實現隨機生成背景顏色的效果，這種效果可以為網站添加更多的趣味和互動。以下是一個簡單的隨機背景顏色代碼：

document.body.style.backgroundColor = "rgb(" + Math.floor(Math.random()*256) + ", " + Math.floor(Math.random()*256) + ", " + Math.floor(Math.random()*256) + ")";

這段代碼利用了JavaScript的Math對象，生成了一個隨機的RGB顏色。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/238771.html