zoukankan      html  css  js  c++  java
  • CSS 背景属性

    一,背景属性

    常用背景相关属性:

    属性 描述
    background-color 规定要使用的背景颜色。
    background-image 规定要使用的背景图像。
    background-size 规定背景图片的尺寸。
    background-repeat 规定如何重复背景图像。
    background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
    background-position 规定背景图像的位置。
    inherit 规定应该从父元素继承background属性的设置。

    background-repeat取值范围:

    描述
    repeat 默认。背景图像将在垂直方向和水平方向重复。
    repeat-x 背景图像将在水平方向重复。
    repeat-y 背景图像将在垂直方向重复。
    no-repeat 背景图像将仅显示一次。
    inherit 规定应该从父元素继承background-repeat属性的设置

    background-attachment取值范围:

    描述
    scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
    fixed 当页面的其余部分滚动时,背景图像不会移动。
    inherit 规定应该从父元素继承background-attachment属性的设置。

    background-position取值范围:

    描述
    top left top center top right center left center center center right bottom left bottom center bottom right 如果只设置了一个关键词,那么第二个值就是"center"。 默认值:0% 0%。
    x% y% 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果只设置了一个值,另一个值就是50%。
    xpos ypos 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果只设置了一个值,另一个值就是50%。 可以混合使用%position值。

    示例:

    body {
      background-color: red;
      backgraound-image: url(xx.png);
      background-size: 300px 300px;
      background-repeat: no-repeat;
      background-position: center 
    }
    

    简写:

    body { 
      background: red url(xx.png) no-repeat fixed center/300px 300px; 
    }
    
  • 相关阅读:
    【文言文】从高考到程序员
    lambda方法引用总结——烧脑吃透
    秒杀苹果carplay baidu车联网API冷艳北京车展
    东君误妾我怜卿(一)
    百度快照投诉技巧案例分析百度快照就是这样刷出来的
    新浪博客是否可以放谷歌广告?如何添加
    与葡萄酒的亲密接触-选购技巧篇
    车联网高速公路智能交通解决方案
    物联网细分领域-车联网(OBD)市场分析
    APP开发选择什么框架好? 请看这里!
  • 原文地址:https://www.cnblogs.com/xiaolang666/p/14686316.html
Copyright © 2011-2022 走看看