CSS背景属性笔录

2018-02-08 10:20:25来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

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背景修剪------规定背景的绘制区域 属性值: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 >这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</div><p>background-origin:content-box:相对于内容定位</p><div >这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</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>

 

 

 

 

 

 

 

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台