css 背景属性详细总结

简介:

1,背景颜色background-color 

background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。

p {

background-color: gray;  和普通颜色设置是一样的

}



2.背景的图片background-img

background-image: url(图片的路径);

background-image: none; 默认值是 none

另外还要补充一点,background-image 也不能继承。事实上,所有背景属性都不能继承。


3,背景重复 backgroun-repeat

1
2
3
4
5
6
7
8
9
10
background-repeat: repeat;  重复平铺满
background-repeat:repeat-x;  向x轴重复 
background-repeat:repeat-y;  向Y轴重复
background-repeat:no-repeat;  不重复
 
body
  
   background-image: url(/i/eg_bg_03.gif);
   background-repeat: repeat-y;
   }

4,背景位置background-position

为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。

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

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

也可以使用数值位置来表示(background-position:50px 100px;)


单一关键字 等价的关键字
center center center
top top center 或 center top
bottom bottom center 或 center bottom
right right center 或 center right
left left center 或 center left

p

  { 

    background-image:url('bgimg.gif');

    background-repeat:no-repeat;

    background-position:top;

  }

等价于

p

  { 

    background-image:url('bgimg.gif');

    background-repeat:no-repeat;

    background-position:top center;

   background-position:center top;


  }


5,背景关联 background-attachment


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

您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:也就是说,文档滚动背景图一直存在。

1
2
3
4
5
6
body 
   {
   background-image:url(/i/eg_bg_02.gif);
   background-repeat:no-repeat;
   background-attachment:fixed
   }

如需查看上例的效果,可以亲自试一试。

background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。也就是说超过的文档不会显示图片背景效果.




      本文转自crazy_charles 51CTO博客,原文链接:http://blog.51cto.com/douya/1840859,如需转载请自行联系原作者

相关文章
|
4月前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
41 0
|
4月前
|
前端开发
CSS属性
CSS属性
43 0
|
2月前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
39 2
|
2月前
|
前端开发
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
68 1
|
2月前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
42 1
|
3月前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
|
2月前
|
前端开发
css简写属性
css简写属性
36 0
|
3月前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
26 0
|
3月前
|
前端开发
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
54 0
|
3月前
|
前端开发
哪些 CSS 属性可以继承?
哪些 CSS 属性可以继承?
65 0

热门文章

最新文章