CSS背景属性
【目录】
①background-attachment背景附件------设置背景图像是否固定或者随着页面的其余部分滚动;
②background-clip背景修剪------规定背景的绘制区域;
③background-origin背景来源------规定 background-position 属性相对于什么位置来定位;
④background-size背景尺寸------规定背景图像的尺寸;
【详解】
①background-attachment背景附件------设置背景图像是否固定或者随着页面的其余部分滚动
常见用法:设置固定的背景图像,使图像不会随着页面的其他部分滚动
属性值:scroll---默认值,背景图像会随着页面其余部分的滚动而移动;fixed---当页面的其余部分滚动时,背景图像不会移动
<style type="text/css"> body { background-image:url(http://www.w3school.com.cn/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed } p{margin:200px 0;} </style> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p>②background-clip背景修剪------规定背景的绘制区域
③background-origin背景来源------规定 background-position 属性相对于什么位置来定位
属性值:与背景修剪属性值相同,border-box边界框;padding-box填充盒;content-box内容盒
下面来看个案例:
<style type="text/css"> div{ border:1px solid black; padding:35px; background-image:url('/i/bg_flower.gif'); background-repeat:no-repeat; background-position:left; } #div1{ background-origin:border-box; } #div2{ background-origin:content-box; } </style> <p>background-origin:border-box:相对于边框定位</p> <div id="div1"> 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 </div> <p>background-origin:content-box:相对于内容定位</p> <div id="div2"> 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 </div>
④background-size背景尺寸------规定背景图像的尺寸;
【兼容】IE9及其他主流浏览器均支持
属性值:length(具体数值设置宽高);percentage(百分比);cover(覆盖);contain(包含);
length(具体宽度):设置背景图像的高度和宽度;第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 auto
percentage(百分比):以父元素的百分比来设置背景图像的宽度和高度;第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 auto
cover(覆盖):把背景图像扩展至足够大,以使背景图像完全覆盖背景区域;背景图像的某些部分也许无法显示在背景定位区域中
contain(包含):把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
【案例】拉伸背景图像,对背景图像水平复制四次
<style type="text/css"> div{ background:url(http://www.w3school.com.cn/i/bg_flower.gif); background-size:25%; border:2px solid #92b901; } </style> <div> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p> </div>
.
①background-attachment背景附件------设置背景图像是否固定或者随着页面的其余部分滚动
常见用法:设置固定的背景图像,使图像不会随着页面的其他部分滚动
属性值:scroll---默认值,背景图像会随着页面其余部分的滚动而移动;fixed---当页面的其余部分滚动时,背景图像不会移动
<style type="text/css"> body { background-image:url(http://www.w3school.com.cn/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed } p{margin:200px 0;} </style> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p>②background-clip背景修剪------规定背景的绘制区域 属性值:border-box边界框;padding-box填充盒;content-box内容盒
border-box | 背景被裁剪到边框盒。 | 测试 |
padding-box | 背景被裁剪到内边距框。 | 测试 |
content-box | 背景被裁剪到内容框。 | 测试 |
③background-origin背景来源------规定 background-position 属性相对于什么位置来定位
属性值:与背景修剪属性值相同,border-box边界框;padding-box填充盒;content-box内容盒
下面来看个案例:
<style type="text/css"> div{ border:1px solid black; padding:35px; background-image:url('/i/bg_flower.gif'); background-repeat:no-repeat; background-position:left; } #div1{ background-origin:border-box; } #div2{ background-origin:content-box; } </style> <p>background-origin:border-box:相对于边框定位</p> <div id="div1"> 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 </div> <p>background-origin:content-box:相对于内容定位</p> <div id="div2"> 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 </div>
④background-size背景尺寸------规定背景图像的尺寸;
【兼容】IE9及其他主流浏览器均支持
属性值:length(具体数值设置宽高);percentage(百分比);cover(覆盖);contain(包含);
length(具体宽度):设置背景图像的高度和宽度;第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 auto
percentage(百分比):以父元素的百分比来设置背景图像的宽度和高度;第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 auto
cover(覆盖):把背景图像扩展至足够大,以使背景图像完全覆盖背景区域;背景图像的某些部分也许无法显示在背景定位区域中
contain(包含):把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
【案例】拉伸背景图像,对背景图像水平复制四次
<style type="text/css"> div{ background:url(http://www.w3school.com.cn/i/bg_flower.gif); background-size:25%; border:2px solid #92b901; } </style> <div> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p> </div>