在設計網頁時,為了讓頁面更加美觀,我們通常要設置一些背景色或者背景圖片。但是有時候我們想要讓頁面更加簡潔,這時候可以考慮用黑白相間的顏色來設置網頁背景。
body { background-color: #fff; /*白色背景*/ } p:nth-child(odd) { background-color: #000; /*奇數段落黑色背景*/ color: #fff; /*白色字體*/ } p:nth-child(even) { background-color: #fff; /*偶數段落白色背景*/ color: #000; /*黑色字體*/ }
上面的CSS代碼中,我們首先將網頁的背景顏色設置為白色,然后使用nth-child選擇器來選擇奇數段落和偶數段落,分別設置它們的背景顏色和字體顏色。在這個例子中,我們選擇了黑色和白色兩種顏色,你也可以根據需要選擇自己想要的顏色。
在設置黑白相間的背景時,我們還可以加上動畫效果,讓頁面更加生動。下面是一個例子:
body { background-color: #fff; } p:nth-child(odd) { background-color: #000; color: #fff; animation: fade 1s ease-in-out infinite alternate; } p:nth-child(even) { background-color: #fff; color: #000; animation: fade 1s ease-in-out infinite alternate; } @keyframes fade { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } }
在這段代碼中,我們使用了CSS動畫的關鍵幀(@keyframes)來設置段落的漸變效果。我們定義了兩個關鍵幀,分別表示段落從不透明度為0,y軸位移-20px到完全不透明,y軸位移為0的過渡效果。通過將這個動畫應用于奇數段落和偶數段落,我們就可以得到比較好看的黑白相間的漸變效果。
總的來說,設置黑白相間的網頁背景可以讓頁面更加簡潔和美觀。我們可以通過CSS選擇器和動畫來實現這個效果,也可以根據自己的需求來進行定制。
上一篇藍色覆蓋紅色盒子css
下一篇css設置高度繼承