CSS3提供了各種背景特效,其中也包括了背景高度的調整。我們可以通過CSS3來調整背景的高度,從而實現一些炫酷的效果。
/*示例CSS代碼*/ .box { background-image: url('bg.jpg'); background-size: auto 100%; /*調整背景高度*/ background-repeat: no-repeat; }
上面的代碼中,我們通過設置background-size屬性,將背景高度設置為100%,同時保持寬度自適應。這樣,背景就會鋪滿整個容器。
值得注意的是,我們還可以使用百分比來調整背景的高度。例如,如果我們想讓背景高度為容器高度的一半,可以這樣寫:
/*示例CSS代碼*/ .box { background-image: url('bg.jpg'); background-size: auto 50%; /*將背景高度設置為容器高度的一半*/ background-repeat: no-repeat; }
同樣,我們還可以通過簡單的CSS代碼實現更加豐富的背景高度效果。例如,在背景高度變化的同時,將容器中的字體放大:
/*示例CSS代碼*/ .box { background-image: url('bg.jpg'); background-size: auto 100%; /*背景高度設置為100%*/ background-repeat: no-repeat; text-align: center; /*居中*/ } .box:hover { background-size: auto 120%; /*當鼠標懸浮于容器上方時,將背景高度放大20%*/ font-size: 24px; /*同時將字體放大*/ }
以上這些實例只是CSS3背景高度效果的冰山一角。隨著我們繼續發掘CSS3的新特性,我們將會發現越來越多的管理方式可以幫助我們拓展網頁設計的邊界。