zoukankan      html  css  js  c++  java
  • css设置元素背景

    背景background 简写形式为

    backgroud:background-color background-position background-size background-repeat background-origin background-clip background-attachment background-image

    其中

    1.background-color背景颜色

    2.background-position 设置图像的位置 可取两个值,字符串的话,第一个表示垂直方向,值包括top.bottom.center。第二个表示水平方向,值包括left.right.center。数字单位或百分数的话,第一个表示水平方向,如10px即距离左边界10px,第二个表示垂直方向 ,如10%,距离上边界10%的高度距离,最上为0.最下为100%。

    3.background-size背景尺寸,四个可取值。

      数字单位  数字单位 第一个为宽度,第二个为高度,如果只设置一个,另一个为auto.如20px 20px 

      百分数 百分数  同上

      contain 等比例缩放图像,图像尽量充满容器,图像始终包含在容器里

      cover 等比例缩放,图像尽量覆盖容器,有可能超出容器

      auto 默认值,以本身尺寸显示

    4.background-repeat 可取五个值

      repeat-x 水平方向平铺图像,图像可能被截断

      repeat-y  垂直方向平铺图像,图像可能被截断

      repeat 水平和垂直方向同时平铺

      space 水平或垂直方向平铺图像,设置图像统一间距,确保图像不被截取

      round 水平或垂直平铺图像,调整图像大小,确保不被截断

      no-repeat 禁止平铺

    5.background-origin 可取三个值,表示背景绘制区域

      border-box 边框和边框以内

      padding-box 边框以内所有区域 

      content-box 内容区域

    6.background-clip 裁剪盒子,表示可见性,取值可origin相同

    7.background-attachment 表示内容附着方式 可取三个值

      fixed 固定在视窗上,内容动背景不动

      local 背景随内容滚动

      scroll 背景固定在元素上,不随内容滚动

    8.background-image none或url,如果指定一个以上,后面的绘制在前面图像下面。

    body
      { 
      background: #00FF00 url(bgimage.gif) no-repeat fixed top;
      }

    对于顺序,经过验证,貌似没有标准、

  • 相关阅读:
    读取Excel还用POI?试试这款开源工具
    Maven optional 关键字透彻图解
    Java 8 Stream Api 中的 peek 操作
    Lombok 使用详解,简化Java编程
    C# 基础知识系列- 16 开发工具篇
    C# 基础知识系列- 15 异常处理篇
    C# 基础知识系列- 14 IO篇 流的使用
    Java Spring Cloud 实战之路-01 框架选型
    C# 基础知识系列- 14 IO篇 文件的操作
    C# 基础知识系列- 14 IO篇 文件的操作
  • 原文地址:https://www.cnblogs.com/cumting/p/6755009.html
Copyright © 2011-2022 走看看