首页 > Web开发 > 详细

CSS 背景

时间:2019-08-06 19:03:05      阅读:104      评论:0      收藏:0      [点我收藏+]

㈠背景色  background-color

⑴background-color 属性设置元素的背景颜色。

⑵元素背景的范围:

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。

如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。

⑶可能会用到的值:

技术分享图片

 

 

 ㈡背景图像     background-image

⑴background-image 属性为元素设置背景图像。

⑵元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。

⑶默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

⑷可能会用到的值:

技术分享图片

 

 

 

㈢背景重复    background-repeat 

⑴background-repeat 属性设置是否及如何重复背景图像。

⑵默认地,背景图像在水平和垂直方向上重复。

⑶可能会用到的值:

技术分享图片

 

 

㈣背景定位   background-position 

⑴关键字

根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对应垂直方向。

如果只出现一个关键字,则认为另一个关键字是 center。

所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:


p
  { 
    background-image:url(‘bgimg.gif‘);
    background-repeat:no-repeat;
    background-position:top:
}
 

⑵百分数值

百分数值同时应用于元素和图像。

图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。

如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。

background-position 的默认值是 0% 0%,在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺


⑶长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上

 

⑷可能会用到的值:

技术分享图片

 

 

 

㈤背景关联   background-attachment

⑴如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。

⑵background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

⑶可能会用到的值:

技术分享图片

 

 

㈥CSS 背景属性

 技术分享图片

 

 

 

㈦代码示例区

 ⑴本例演示如何为元素设置背景颜色。

代码:

 技术分享图片

 效果图:

技术分享图片

 

 

⑵本例颜色如何设置部分文本的背景颜色。

代码:

技术分享图片

 

效果图:

技术分享图片

⑶本例演示如何将图像设置为背景。

代码

 技术分享图片

 效果图:

技术分享图片

 

 

 

 ⑷本例演示如何为多个元素同时设置背景图像。

代码:

技术分享图片

效果图:

技术分享图片

 

 ⑸本例演示如何重复背景图像。

代码:

 技术分享图片

 效果图:

技术分享图片

 

 

⑹本例演示如何垂直地重复背景图像。

代码

技术分享图片

 效果图:

技术分享图片

 

 ⑺本例演示如何垂直地重复背景图像。

 代码:

技术分享图片

效果图:

技术分享图片

 

⑻本例演示如何仅显示一次背景图像。

 代码:

 技术分享图片

 效果图:

技术分享图片

 

⑼本例演示如何在页面上放置背景图像。

 代码:

 技术分享图片

 

效果图:

技术分享图片

 

 ⑽本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。

代码:

技术分享图片

  

 效果图:

技术分享图片

 

 

 

(11)本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。

 代码:

 技术分享图片

效果图:

技术分享图片

 

 

     希望有所帮助        

CSS 背景

原文:https://www.cnblogs.com/shihaiying/p/11311053.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!