zoukankan      html  css  js  c++  java
  • CSS的background简写方式

    在CSS2.1里,background属性的简写方式包含五种属性值,从CSS3开始,又增加了3个新的属性值,加起来一共8个。

    CSS2.1

    • background-color 使用的背景颜色。
    • background-image 使用的背景图像。
    • background-repeat 如何重复背景图像。
    • background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
    • background-position 背景图像的位置。

    CSS3

    • background-size 背景图片的尺寸。
    • background-origin 背景图片的定位区域。
    • background-clip 背景的绘制区域。

    简写形式

    background: 
    [background-color]
     [background-image] 
    [background-repeat] 
    [background-attachment] 
    [background-position] /
    [ background-size] 
    [background-origin] 
    [background-clip];
    需要注意的是里面的/,它和font以及border-radius里简写方式使用的/用法相似。/可以在支持这种写法的浏览器里在background-position后面接着写background-size
    除此之外,你也可以增加另外两个描述它的属性值: background-originbackground-clip

    示例方法:
    .example {
      background: aquamarine 
                  url(img.png) 
                  no-repeat 
                  scroll 
                  center center / 50% 
                  content-box content-box;
    }
  • 相关阅读:
    SSL配置
    PHPStorm 打开时闪退的问题
    【网址链接】
    js中将string转换为number
    HTML特效代码大全
    前端面试题-重要
    元素框默认的计算方式
    html中有趣的显示出柠檬的方法
    html中圆角方法border-top-left-radius
    html+css显示出三角形方法transparent
  • 原文地址:https://www.cnblogs.com/chenduzizhong/p/12346348.html
Copyright © 2011-2022 走看看