ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS常规属性

2020-07-18 21:02:03  阅读:276  来源: 互联网

标签:repeat center 背景 image 常规 background CSS 属性


CSS3的常规属性

背景属性——background

​ 在css中使用background属性来设置背景,它的值有以下几个:

属性 描述
background 简写属性,作用是将背景属性设置在一个声明当中。
background-color 设置的是背景颜色。(颜色名 十六进制 rgb() rgba())
background-image 设置背景图像,图像默认水平垂直平铺
background-repeat 设置背景图像平铺或者不平铺
background-attachment 设置背景图像固定或者随着页面的区域部分滚动
background-position 设置背景图像的起始位置。

【注意】背景图像属性background-image使用的是url函数,而不是herf属性。

background-repeat:它的值有以下几种:

repeat:背景图像将向垂直和水平方向重复。这是默认

repeat-x:只有水平位置会重复背景图像

repeat-y:只有垂直位置会重复背景图像

no-repeat:background-image不会重复

inherit:指定background-repea属性设置应该从父元素继承

body {
	background-image: url(./img/test.jpg);
}

默认情况如下图:

它会在水平和垂直方向上同时平铺,即默认值repeat。

repeat-x:

body {
	background-image: url(./img/test.jpg);
	background-repeat: repeat-x;
}

结果:

repeat-y:

body {
	background-image: url(./img/test.jpg);
	background-repeat: repeat-y;
}

结果:

no-repeat:(不平铺)

body {
	background-image: url(./img/test.jpg);
	background-repeat: no-repeat;
}

结果:

background-attachment:页面的固定或者不固定。 它的值有以下几种:

scroll:背景图片随着页面的滚动而滚动,这是默认的。

fixed:背景图片不会随着页面的滚动而滚动

local:背景图片会随着元素内容的滚动而滚动。

bbackground-attachment:scroll:

默认值就是scroll,当滚动页面的滚动条,它会随着页面滚动。

background-attachment:fixed:

这时就不会随着页面滚动。

background-position:背景图片的定位 它的值有三种:方位组合性名词,百分数,px。其中定位有两个值,第一个值代表水平方向,达第二个代表垂直方向。

方位组合性名词:(水平方向的方位名词:left center right 垂直方向的方位名词:top center bottom)

left top 左边的上边 默认值
left center:左边的中间
left bottom:左边的下边
right top:右边的上边
right center:右边的中间
right bottom:右边的下边
center top:中间的上面
center center:中间的中间
center bottom:中间的下面

对应上面的九个方位如下图所示:

当只写一个值时,第二个值默认为center:

body {
	background-image: url(./img/test.jpg);
	background-repeat: no-repeat;
	height: 1500px;
	background-position:  center;/*水平方向上为center 省略的垂直默认为center*/
}

结果:

百分比值:第一个值是水平位置,第二个值是垂直。左上角是0%0%。右下角是100%100%。如果仅指定了一个值,其他值将是50%。 默认值为:0%0% 水平居中:50% 50%

px:具体的定位,同样也是两个值,一个代表水平方向的,一个代表垂直方向的。百分比和px单位也是可以混用的,当然这里也可以使用其他的单位,这里我举例使用的是px单位。

综上所述,我们可以把背景的几个属性写在一个属性中:background

注意一下他的书写顺序:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

如下述代码:

body {
	height: 1500px;
	background: url(img/test.jpg) no-repeat fixed center;/*background属性的简写*/
}

【注意】各个属性值之间使用空格连接。

CSS3中新增的背景属性

多背景

​ 在css3中新增了几个背景属性,其中对background-image进行了进一步的优化,即可以引入多个背景图片,之前的版本之呢个使用一个图片作为背景。

 div {
		width: 500px;
		height: 500px;
		background-image: url(img/01.gif),url(img/02.gif);/*同时使用两张图片作为背景,中间使用逗号隔开*/
		background-repeat: no-repeat,repeat;/*对于两个背景,分贝使用两个不同的属性值设置 中间使用逗号隔开*/
		background-position: right bottom,center; 
}

结果:

background-size:指定背景图像的大小

在之前 版本中,背景图像的大小只能由它的实际大侠来决定,该属性则是用于设置背景图像的大小。

同样也是两个值,分别代表宽度和高度,可以使用百分比,也可以使用px单位。

div {
		width: 500px;
		height: 500px;
		background-image: url(img/01.gif);
		background-repeat: no-repeat;
		background-position:center; 
				 
}
.block {
	background-size: 70px 70px;
}

background-origin:设置背景绘制的区域

该属性用于设置背景绘制的区域,它的值有以下几种:

border-box:默认值。背景绘制在边框方框内(剪切成边框方框)。

padding-box:背景绘制在衬距方框内(剪切成衬距方框)。

content-box: 背景绘制在内容方框内(剪切成内容方框)。

 div {
	width: 500px;
	height: 500px;
	margin: 0 auto;
	background-color: red;
	border: 10px dotted black;
}

默认情况下:

背景颜色的覆盖范围从边框开始,同时也是border-box的效果,默认值。

background-clip: padding-box:

背景绘制区域从内边距开始(内边距的最外层就是边框)

background-clip:content-box

背景区域的绘制将会从内容部分开始

background-origin:指定背景图像的位置区域

​ 它的值跟上面的background-clip一样,只不过这个属性针对的是背景图像,上面的background-clip针对的是背景绘制的颜色

background-origin:border-box

background-origin:padding-box:(默认值)

background-origin:content-box

【注意】如盒子没有内边距,那么设置了content-box和padding的效果是一样的。

标签:repeat,center,背景,image,常规,background,CSS,属性
来源: https://www.cnblogs.com/qmlove/p/13337452.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有