当前位置: 首页 > news >正文

【前端基础】14、CSS设置背景(background相关的)

1、background-image

用于设置元素的背景图片。

  1. 会覆盖(但不是全覆盖)background-color上面
    在这里插入图片描述
  2. 如果设置多张图片,第一张图片在上面,其他图片按顺序层叠在下面。
    在这里插入图片描述
  3. 设置图片一定要设置高度和宽度,否则图片不显示。
    在这里插入图片描述

2、background-repeat

用于设置背景是否平铺。
常见的设定值:
在这里插入图片描述

  1. repeat:平铺
    在这里插入图片描述

  2. no-repeat:不平铺
    在这里插入图片描述

  3. repeat-x:水平方向平铺
    在这里插入图片描述

  4. repeat-y:垂直方向平铺
    在这里插入图片描述

3、background-size

设置背景图片大小。
在这里插入图片描述

  1. auto
    在这里插入图片描述

  2. cover
    在这里插入图片描述

  3. contain
    在这里插入图片描述

  4. <percentage>
    在这里插入图片描述

  5. length
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

4、background-position

在这里插入图片描述

  1. 具体数值

在这里插入图片描述

  1. 水平方向设置(只设置一个方向,另一个默认center
    在这里插入图片描述
    在这里插入图片描述
  2. 垂直方向设置(只设置一个方向,另一个默认center
    在这里插入图片描述
  3. 水平和垂直方向都设置
    在这里插入图片描述

5、background-attachment

在这里插入图片描述

  1. scroll
    在这里插入图片描述

  2. local
    在这里插入图片描述
    在这里插入图片描述

  3. fixed
    在这里插入图片描述

其他:
在这里插入图片描述

6、background-imageimg的对比

在这里插入图片描述

http://www.lryc.cn/news/615828.html

相关文章:

  • Unity中实现自动寻路
  • 串口通信初始化过程是怎样的???
  • 每日五个pyecharts可视化图表-line:从入门到精通 (2)
  • go语言运算符
  • H3C(基于Comware操作系统)与eNSP平台(模拟华为VRP操作系统)的命令差异
  • GPT OSS深度解析:OpenAI时隔6年的开源模型,AI民主化的新里程碑?
  • 【递归、搜索与回溯算法】深度优先搜索
  • python Flask简单图书管理 API
  • 从Redisson源码角度深入理解Redis分布式锁的正确实现
  • Lua基础+Lua数据类型
  • Hadoop MapReduce过程
  • nginx+Lua环境集成、nginx+Lua应用
  • 分享一个基于Python和Hadoop的的电信客户特征可视化分析平台 基于Spark平台的电信客服数据存储与处理系统源码
  • 如何解决pip安装报错ModuleNotFoundError: No module named ‘mlflow’问题
  • leetcode2379:得到K个黑块的最少涂色次数(定长滑动窗口)
  • Boost.Asio io_service 与 线程 的分析
  • 字节:计算机存储单位
  • 算术运算符指南
  • 企业级WEB应用服务器TOMCAT — WEB技术详细部署
  • 使用Blender可视化多传感器坐标系转换
  • 从onnx模型到om模型的全自动化转化
  • 2025年APP开发趋势:4大方向重构行业格局
  • 【lucene】BlockDocsEnum 跟BlockImpactsDocsEnum 的区别
  • LeetCode 869.重新排序得到 2 的幂:哈希表+排序(一次初始化)
  • Java设计模式之开闭原则介绍与说明
  • 深入解析Go设计模式:命令模式实战
  • 分布微服务电商订单系统Rust编码开发[上]
  • Rust进阶-part6-宏
  • [激光原理与应用-224]:机械 - 机械设计与加工 - 常见的术语以及含义
  • 每日算法刷题Day60:8.10:leetcode 队列5道题,用时2h