• css 背景图片


    1.background-image 设置背景图片
    - 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色
    - 如果背景的图片小于元素,则背景图片会自动在元素中平铺将元素铺满
    - 如果背景的图片大于元素,将会一个部分背景无法完全显示
    - 如果背景图片和元素一样大,则会直接正常显示

    2.background-repeat 用来设置背景的重复方式
    可选值:
    repeat 默认值 , 背景会沿着x轴 y轴双方向重复
    repeat-x 沿着x轴方向重复
    repeat-y 沿着y轴方向重复
    no-repeat 背景图片不重复

    3.background-position 用来设置背景图片的位置
    设置方式:
    通过 top left right bottom center 几个表示方位的词来设置背景图片的位置
    使用方位词时必须要同时指定两个值,如果只写一个则第二个默认就是center

    通过偏移量来指定背景图片的位置:
    水平方向的偏移量 垂直方向变量

    4.设置背景的范围
    background-clip
    可选值:
    border-box 默认值,背景会出现在边框的下边
    padding-box 背景不会出现在边框,只出现在内容区和内边距
    content-box 背景只会出现在内容区

    background-origin 背景图片的偏移量计算的原点
    padding-box 默认值,background-position从内边距处开始计算
    content-box 背景图片的偏移量从内容区处计算
    border-box 背景图片的变量从边框处开始计算

    5.background-size 设置背景图片的大小
    第一个值表示宽度
    第二个值表示高度
    - 如果只写一个,则第二个值默认是 auto

    cover 图片的比例不变,将元素铺满
    contain 图片比例不变,将图片在元素中完整显示

    6.background-color
    background-image
    background-repeat
    background-position
    background-size
    background-origin
    background-clip
    background-attachment

    - backgound 背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置
    并且该样式没有顺序要求,也没有哪个属性是必须写的

    注意:
    background-size必须写在background-position的后边,并且使用/隔开
    background-position/background-size

    background-origin background-clip 两个样式 ,orgin要在clip的前边

    7.background-attachment
    - 背景图片是否跟随元素移动
    - 可选值:
    scroll 默认值 背景图片会跟随元素移动
    fixed 背景会固定在页面中,不会随元素移动
    */
    background-attachment: fixed;

  • 相关阅读:
    ASP.NET Core 中文文档 第四章 MVC(3.2)Razor 语法参考
    ASP.NET Core 中文文档 第四章 MVC(3.1)视图概述
    ASP.NET Core 中文文档 第四章 MVC(2.3)格式化响应数据
    ASP.NET Core 中文文档 第四章 MVC(2.2)模型验证
    ASP.NET Core 中文文档 第四章 MVC(2.1)模型绑定
    ASP.NET Core 中文文档 第四章 MVC(01)ASP.NET Core MVC 概览
    mysql 解除正在死锁的状态
    基于原生JS的jsonp方法的实现
    HTML 如何显示英文单、双引号
    win2008 r2 服务器php+mysql+sqlserver2008运行环境配置(从安装、优化、安全等)
  • 原文地址:https://www.cnblogs.com/fsg6/p/12681983.html
Copyright © 2020-2023  润新知