码迷,mamicode.com
首页 > Web开发 > 详细

css-css背景

时间:2017-09-17 21:05:54      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:关联   水平   水平垂直   round   背景图像   att   chm   bottom   attach   

CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果

一:背景色background-color 属性

p {background-color: gray;}

二:背景图像 background-image 属性

body {background-image: url(/i/eg_bg_04.gif);}

三:背景重复background-repeat 属性

  属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。

  repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,

  no-repeat 则不允许图像在任何方向上平铺

  

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

四:背景定位background-position 属性

 为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异 

body
  { 
    background-image:url(‘/i/eg_bg_03.gif‘);
    background-repeat:no-repeat;
    background-position:center;
  }

五:背景关联background-attachment 属性

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

 

css-css背景

标签:关联   水平   水平垂直   round   背景图像   att   chm   bottom   attach   

原文地址:http://www.cnblogs.com/lixiang1013/p/7536835.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!