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>

 

 

 

 

 

 

 

 

 

 

 

.

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