CSS 背景常用属性

CSS 背景常用属性


  1. background-color
    这个属性过于简单, 以下写法均可
    background-color:red;
    background-color:rgb(0,0,255);
    background-color:#ffffff;
    
  2. background-image
    绝对路径、相对路径均可
    background-image:url(...);
    
  3. background-repeat
    配合上一个属性使用,表示图片是否平铺。
    repeat-x X轴平铺
    background_repeat:no-repeat; /*不平铺*/
    background_repeat:repeat-y  /*Y轴平铺*/
    background_repeat:repeat-x  /*X轴平铺*/
    
  4. background-position
    也是配合background-image使用的,设置图片的起始点,默认是容器的左上角零点处。这个一般在logo处使用,为避免过多请求,多个小logo通常包含在一张图片上。零点向右为X轴的正方向,向下为Y轴正方向。当使用某处的logo,如果这个小logo在整个logo图片上包含着,且位置为20px 20px,为了使用这个logo,那么CSS代码就要这么写:
    background-position:-20px -20px;
    
    如果logo长宽为30px 30px ,那么把容器的长宽也也设置为30px 30px ,就刚好完美显示logo。
    此属性还有下面的写法:
    background-position:left bottom; /*靠左靠下*/
    background-position:50% 50%;	/*在容器中间显示*/
    
  5. background-attachment
    控制背景图片固定或者随页面滚动。默认值scroll,可以设置为fixed。这个属性挺好玩,哈哈
    在这里插入图片描述
  6. background
    简写。可以把上面的属性值一个或多个写在这里面。方便快捷。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值