当前位置: 首页 > Web前端 > HTML5

CSS-背景-

时间:2023-04-05 21:02:14 HTML5

1.css3简介CSS3是CSS(CascadingStyleSheet)技术的升级版。模块、超链接方法、语言模块、背景和边框、文本效果、多栏布局和其他模块。2.css3background概述有几个很棒的背景属性,它们提供了对背景更强大的控制。background-size:指定背景图片的大小。background-orgin:指定背景图片的定位区域。background-clip:指定背景的绘制区域。<浏览器支持>InternetExplorer9+、Firefox、Chrome、Safari和Opera(这些浏览器支持css3background属性)(1)background-size(指定背景图片的大小)body{background:url(为你的背景插入apicture)background-size(指定你的背景图片的大小)background-repeat(让你的背景图片向下延伸)padding-top(你的背景和顶部的距离)}设置背景大小的方法如上四路。<*valuedefinition>设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置了一个值,第二个值将设置为自动。<*percentage>(略)(2)background-orgin(指定背景图片的定位区域)body{background-origin:content-box;(背景图片填充框的相对位置)background-origin:border-box;(background图像边界框的相对位置)background-origin:padding-box;(背景图片相对位置的内容框)}背景图片的位置(3)background-clip(指定背景的绘图区域)body{background-clip:content-box;背景为在内容框内绘制(切入内容框)background-clip:padding-box;背景绘制在填充框内(切入填充框)background-clip:border-box;Defaults。在borderbox中绘制背景(裁剪成borderbox)}附:###Background-简写属性###在上面的例子中,我们可以看到页面的背景颜色是由很多属性控制的。为了简化这些属性的代码,我们可以将这些属性组合在同一个属性中。背景色的简写属性为"background":body{background:#ffffffurl('img_tree.png')no-repeatrighttop;}注:以上内容如有错误,请及时告知。