关于背景

background:
1、css2:background:background-color || url("") || no-repeat || scroll || 0 0;
  css3: background: url("") || 0 0/cover || no-repeat || scroll || border-box || content-box || black;
CSS2中的Background属性:
background: background-color || background-image || background-repeat || background-attachment || background-position;
也可以分解写成:
background-color: color值 || RGBA值;
background-image: url();
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-attachment: scroll || fixed;
background-position: <length> || <per>

CSS3中的Background属性
background: background-image || background-position/background-size || background-repeat || background-attachment || background-clip || background-origin || background-color
也可以分解写成:
background-image: url();
background-position: <length> || <per>
background-size: <length> || <per>
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-attachment: scroll || fixed;
background-clip: padding-box || border-box || content-box;
background-origin: padding-box || border-box || content-box;
background-color: color值 || RGBA值;

这里有点特别需要注意,如果使用联写方式时,background-size需跟在background-position的后面,并用“/”隔着,即"background-position/background-size"。另外本人强烈建议CSS3中的Background属性不要全部联写,最好把CSS3中的属性拆分出来单独书写,因为他们在不同浏览器下需要加上自己的前缀,如:
background: background-color || background-image || background-repeat || background-attachment || background-position;
background-size: <length> || <per>
background-clip: padding-box || border-box || content-box;
background-origin: padding-box || border-box || content-box;

后面三个最好在运用时按前面介绍的,把各自的私有前缀加上。重温了一次两种标准下的Backgroud后,就正式进入今天的主题CSS3的多背景。

background:linear-gradient(black 50%, white 50%) ; 背景颜色黑色一半白色一半 默认从上向下

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,831评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,780评论 0 2
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,382评论 0 11
  • background应该是CSS里使用频率颇高的属性,简单实用。但参数偏多,本篇就介绍一下background的各...
    张歆琳阅读 9,767评论 4 26
  • 与神性对话 开启跟“神性”的对话,五部曲: 第一步:静心、冥想、真正看见 不假思索地快速写出你的问题。 不假思索,...
    慧子永远没有太晚的开始阅读 1,950评论 3 1