CSS背景属性笔录

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 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>

.

相关推荐