提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 浅谈CSS的background背景属性【css教程】,Css,背景属性

文档树中的每一个元素只是一个矩形盒子,这些盒子都有一个背景层,背景层可所以完整通明或许别的色彩,也可所以一张图片。此背景层由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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"浅谈CSS的background背景属性【css教程】,Css,背景属性"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线