CSS3增加了很多新的背景屬性,使網(wǎng)頁(yè)背景變得更加豐富多彩,以下是一些常用的新屬性:
background-clip: border-box | padding-box | content-box | initial | inherit; background-origin: border-box | padding-box | content-box | initial | inherit; background-size: auto | length | percentage | cover | contain | initial | inherit; background-attachment: scroll | fixed | local | initial | inherit; background-image: none | url() | linear-gradient() | radial-gradient() | repeating-linear-gradient() | repeating-radial-gradient() | initial | inherit; background-color: color | transparent | initial | inherit; background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity | initial | inherit; background-clip: text | padding-box | border-box | initial | inherit;
其中background-size屬性可以用來設(shè)置背景圖像的尺寸,可以使用auto、length、percentage、cover和contain等值。如果設(shè)置為cover,則會(huì)等比例縮放背景圖像,直到完全覆蓋背景區(qū)域;而如果設(shè)置為contain,則會(huì)等比例縮放背景圖像,直到完全放入背景區(qū)域。
另外,background-clip屬性和background-origin屬性可以用來設(shè)置背景的裁剪和定位方式。background-clip屬性有border-box、padding-box和content-box等值,用于指定需要裁剪的部分;而background-origin屬性有同樣的值,用于指定背景圖像相對(duì)于哪個(gè)盒子進(jìn)行定位。
最后,如果想要讓背景圖像和背景顏色混合起來,我們可以使用background-blend-mode屬性。此屬性有多種混合模式可以選擇,例如multiply、screen、overlay等。其中最常用的是overlay模式,它可以使得背景顏色變得透明,并與背景圖像混合在一起。
上一篇css li slide
下一篇css label反色