旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

浅谈CSS的background背景属性【css教程】

作者:搜搜PHP网发布时间:2019-11-26分类:CSS浏览:74


导读:文档树中的每一个元素只是一个矩形盒子,这些盒子都有一个背景层,背景层可所以完整通明或许别的色彩,也可所以一张图片。此背景层由8个CSS属性(加上1个简写的属性)掌握。bac...
文档树中的每一个元素只是一个矩形盒子,这些盒子都有一个背景层,背景层可所以完整通明或许别的色彩,也可所以一张图片。此背景层由8个CSS属性(加上1个简写的属性)掌握。

background-color

background-color属性设置元素的背景色彩。它的值可所以恣意正当的色彩值或许是transparent关键字。

.left { background-color: #ffdb3a; }
.middle { background-color: #67b3dd; }
.right { background-color: transparent; }

相干教程:CSS视频教程

背景色彩绘制在由[background-clip](#backgroundclip)属性指定的盒模子的地区内。假如还设置了任何背景图象,则在它们背面绘制色彩层。与能够有多个的图象层差别,关于一个元素,我们只能有一个色彩层。

background-image

background-image属性定义元素的一个或多个背景图象。它的值通常是用url()标记定义的图象的url。也能够运用none作为它的值,但如许会生成一个空的背景层

.left { background-image: url('ire.png'); }
.right { background-image: none; }

我们也能够指定多张背景图片并经由过程逗号分开。背面的图片都邑绘制在Z轴方向上前一个图片的背面。

.middle { 
  background-image: url('khaled.png'), url('ire.png');
  /* Other styles */
  background-repeat: no-repeat; 
  background-size: 100px;
}

background-repeat

background-repeat属性掌握背景图片在被[background-size](#backgroundsize)属性改变了大小及被[background-position](#backgroundposition )属性定位后怎样平铺。

该属性的值可所以 repeat-x, repeat-y, repeat, space, round, no-repeat关键字,除了repeat-x和repeat-y,其他值能够为x轴和y轴定义一次,也能够零丁定义每一个维。

.top-outer-left { background-repeat: repeat-x; }
.top-inner-left { background-repeat: repeat-y; }
.top-inner-right { background-repeat: repeat; }
.top-outer-right { background-repeat: space; }
.bottom-outer-left { background-repeat: round; }
.bottom-inner-left { background-repeat: no-repeat; }
.bottom-inner-right { background-repeat: space repeat; }
.bottom-outer-right { background-repeat: round space; }

background-size

background-size属性定义背景图片的大小,它的值可所以关键字,长度或许百分比。

可用于此属性的关键字为“contains”和“cover”。contain将等比缩放图象到最大的大小。另一方面,cover将把图象缩放到尽量小的尺寸,个中全部背景地区依然被掩盖。

.left { 
  background-size: contain;
  background-image: url('ire.png'); 
  background-repeat: no-repeat;
}
.right { background-size: cover; /* Other styles same as .left */ }

关于长度和百分比,我们能够同时指定背景图片的宽高,百分比值是依据元素的大小盘算的。

.left { background-size: 50px; /* Other styles same as .left */ }
.right { background-size: 50% 80%; /* Other styles same as .left */ }

background-attachment

background-attachment属性掌握掌握背景图象相关于视口和元素的转动体式格局 。它有三个潜伏的值。

fixed意味着背景图片牢固在视口而且不会挪动,即运用户正沿着视口转动。local意味着背景图片牢固在它在元素中的位置。假如这个元素能够转动而且背景图片定位在顶部,那末当用户向下转动这个元素,背景图片将会从视图中滚出去。末了scroll意味着背景图片是牢固的且不会跟着元素内容的转动而转动。

.left { 
  background-attachment: fixed;
  background-size: 50%;
  background-image: url('ire.png'); 
  background-repeat: no-repeat;
  overflow: scroll;
}
.middle { background-attachment: local; /* Other styles same as .left */ }
.right { background-attachment: scroll; /* Other styles same as .left */ }

background-position

这个属性连系background-origin属性定义背景图片的肇端位置应在那边。它的值可所以关键字,长度或许百分比,我们能够指定沿x轴和y轴的位置。

可用于此属性的关键字为top, right, bottom, left, 和center,我们能够恣意组合这些关键字,假如只明白指定了一个关键字,那末别的一个默许就是center。

.top-left { 
  background-position: top;
  background-size: 50%;
  background-image: url('ire.png'); 
  background-repeat: no-repeat;
}
.top-middle { background-position: right;  /* Other styles same as .top-left */ }
.top-right { background-position: bottom;  /* Other styles same as .top-left */ }
.bottom-left { background-position: left;  /* Other styles same as .top-left */ }
.bottom-right { background-position: center;  /* Other styles same as .top-left */ }

关于长度和百分比,我们也能够指定沿x轴和y轴的位置。百分比值是按元素的大小盘算的。

.left { background-position: 20px 70px; /* Others same as .top-left */ }
.right { background-position: 50%; /* Others same as .top-left */ }


background-origin

background-origin属性指定背景图片应依据盒模子的哪一个地区举行定位。

当值为border-box时,背景图片的位置依据边框地区定位,为padding-box时其位置依据边距地区定位,为content-box时其位置依据内容地区定位。

.left { 
  background-origin: border-box;
  background-size: 50%;
  background-image: url('ire.png'); 
  background-repeat: no-repeat;
  background-position: top left; 
  border: 10px dotted black; 
  padding: 20px;
}
.middle { background-origin: padding-box;  /* Other styles same as .left*/ }
.right { background-origin: content-box;  /* Other styles same as .left*/ }

background-clip

background-clip属性肯定背景绘制地区,这是背景能够被绘制的地区。和background-origin属性一样,它也 基于盒子模子的地区。

.left{ 
  background-clip: border-box;
  background-size: 50%;
  background-color: #ffdb3a; 
  background-repeat: no-repeat;
  background-position: top left; 
  border: 10px dotted black; 
  padding: 20px;
}
.middle { background-clip: padding-box;  /* Other styles same as .left*/ }
.right { background-clip: content-box;  /* Other styles same as .left*/ }

background

末了,background属性是其他背景相干属性的简写。子属性的递次可有可无,由于每一个属性的数据类型差别。但是关于background-origin 和 background-clip,假如只指定了一个盒模子地区,那末这两个属性都邑运用这个值。假如指定了两个,那末第一个值将用于background-origin属性。

以上就是浅谈CSS的background背景属性的细致内容,更多请关注ki4网别的相干文章!

标签:Css背景属性