CSS中背景加表單是網頁設計中常用的一種技巧,使用該技巧可以美化網頁,同時也可以提高用戶體驗。在下面的代碼中,我們將講解如何通過CSS實現背景加表單。
/* CSS代碼 */ /* 設置背景圖片 */ body { background-image: url("background.jpg"); background-size: cover; } /* 設置表單樣式 */ form { background-color: rgba(255, 255, 255, 0.5); border-radius: 10px; padding: 20px; } /* 設置表單中輸入框樣式 */ input[type=text], textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; }
如上所述,CSS中通過設置body的background-image屬性來設置背景圖片,并使用background-size:cover屬性來保證背景鋪滿整個頁面。
接下來,我們通過設置form的樣式來美化表單。在代碼中,我們使用了rgba(255, 255, 255, 0.5)來設置表單的背景顏色,同時也用border-radius屬性來設置表單的圓角。最后,我們設置了表單內輸入框和文本框的樣式,保證用戶輸入的內容美觀可讀。
總的來說,CSS中背景加表單是一種簡單易用的技巧,可以讓網頁更加美觀,同時也讓用戶更加舒適地使用網頁。
上一篇css中表達文字顏色
下一篇css中自動換行代碼