【CSS】css的background属性用法详解,background常用缩写形式

2023-10-27

background是一个简写属性,可以在一个声明中设置背景颜色、背景位置、背景大小、背景平铺方式、背景图片等样式
语法background: 颜色 图片 位置/大小 平铺方式 bg-origin 绘制区域 bg-attachment;

background 简写属性在一个声明中设置所有的背景属性:

  1. background-color: #fff; //指定背景颜色

  2. background-image: url(~@/assets/images/upload.png); //设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景;

  3. background-position: center;//设置背景图像的位置

  4. background-size: cover;//设置背景图像的大小

  5. background-repeat: no-repeat; //指定背景图像的铺排方式

  6. background-origin: content-box;//设置背景图像显示的原点[background-position相对定位的原点];

  7. background-clip: content-box;//设置背景图像向外剪裁的区域;

  8. background-attachment: fixed;//指定背景图像是滚动还是固定; 默认滚动;

语法:

  1. 如果不设置其中的某个值,也不会出问题,比如background: #fff;也是允许的。
  2. 顺序并非固定
  3. background-position 和 background-size 属性, 之间需使用/分隔, 且position值在前, size值在后。
  4. 如果同时使用 background-origin 和 background-clip 属性, origin属性值需在clip属性值之前, 如果origin与clip属性值相同, 则可只设置一个值。
background:bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment;

background: url(~@/assets/images/custom-task/uploadimg.png) center/50% no-repeat;

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【CSS】css的background属性用法详解,background常用缩写形式 的相关文章

  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • 如何简化这个 LESS CSS Box-shadow mixin? (带有“方向”的多个阴影)

    如何减少这段代码 可能使用循环 以拥有一个接受方向和数字的 函数 dir 想要的 方向 number 我需要多少次影子 这里是10次 color 阴影的颜色 Example 可以工作 但不是很容易使用 perspective box dir
  • 使用纯 CSS 创建向上和向下箭头图标或按钮

    我正在尝试使用纯 CSS 且无背景图像创建如下所示的 向上和向下 控制按钮 但是当我在 中添加箭头的CSS时li className after or li className before 主盒子的位置移动了 这是我遇到的问题的小提琴 g
  • 从字体到跨度(大小和颜色)和背面的正则表达式(VB.NET)

    我正在寻找一个正则表达式 可以将我的字体标签 仅具有大小和颜色属性 转换为具有相关内联CSS的span标签 如果有帮助的话 这将在 VB NET 中完成 我还需要一个正则表达式来实现相反的效果 下面详细说明的是我正在寻找的转换示例 font
  • LESS CSS 语法对现代化很有用

    通常我使用现代化 http modernizr com 了解浏览器的功能 同时 我用LESS CSS http lesscss org 使我的CSS更具可读性和可维护性 使用 LESS 嵌套规则的常见样式如下所示 header color
  • Gmail 无法在电子邮件上正确呈现字体

    我已经建立了一个 html 电子邮件并使用了 Google 字体 我已使用以下方法将字体包含在 head 标签中 if mso endif 并使用字体 即我这样做了
  • TDD/测试 CSS 和 HTML? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 有没有办法测试 CSS 和 HTML 例如 有时某些通知会受到某些 CSS 更改的影响 我不想每次进行更改时都手动测试所有通知 Tha
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • Twitter bootstrap 3表单水平和单行多个输入列

    我需要将多列输入放在单行中 如下所示 我通过将多个输入分组为一个来做到这一点form group 但是这样我不能使用has error class div class form group div
  • 我的 CSS 未在 Internet Explorer 11 和 Firefox 中加载!仅适用于 Chrome

    我正在创建一个简单的网页 我的 CSS 只能在 Chrome 中使用 它在 Firefox 和 IE11 中都不起作用 这是我的 HTML h1 b u Adding a new Visitor u b h1 br div class wr
  • 设置浏览器窗口最小化的最小尺寸限制?

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用
  • 根据变量值将 LESS 编译为多个 CSS 文件

    有一个指定颜色的变量variables less文件 例如 themeColor B30F55 和一个 json构成实体列表的文件 其中每个键是一个实体 ID 键的值是该实体的颜色 例如 8ab834f32 B30F55 3cc734f31
  • 如何倾斜 div 并保持背景图像不倾斜

    我已经花了几个小时了 所以希望有人能提供帮助 我有一个网站 其中大部分 div 都是倾斜的 大多数 div 都包含背景图像 现在我已经让 div 倾斜了 内容完美地位于其中 唯一的问题是背景图像 它与父级一起倾斜 我用谷歌搜索了很多 但找不
  • Textmate“注释”命令对于 css 代码无法正常工作

    当我在 TextMate 中切换 CSS 源代码的注释时遇到一些问题 Using the shortcut CMD I activate the Comment Line Selection command from the source
  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使
  • 如何在背景剪辑中包含文本装饰:文本;影响?

    我在用 webkit background clip text border and color transparent在锚标记上 下划线似乎永远不可见 我想要的是将文本装饰包含在背景剪辑中 这是我的CSS background clip
  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • 显示覆盖以覆盖整个页面

    我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di
  • HTML 默认图像大小

    我在我的代码上显示 3 张图片 图片具有不同的尺寸 宽度和高度 div class row div class col lg 12 h2 class page header Gallery h2 div div class col md 4

随机推荐

  • TCP协议的三次握手(为了建立连接)

    TCP协议的三次握手 为了建立连接 第一次握手 客户端 Client 向服务器端 Server 发送连接请求 等待服务器端确认 在这一次 客户端会发送一个含SYN同步标志的 TCP报文 SYN同步报文会指明客户端使用的端口以及TCP连接的初
  • Prometheus-Alertmanager 警报管理器-通知模版

    文章目录 一 通知模版介绍 二 模板中可用的数据结构 1 数据 Data 2 告警 Alert 3 KV 4 方法 三 定义可重用模版 一 通知模版介绍 发送给接收方的通知是通过模板构建的 警报管理器附带默认模板 但也可以自定义它们 为避免
  • AndroidStudio升级问题

    前言 今天开这篇文章记录之后遇到AndroidStudio升级或BUG问题 Android Studio Dolphin 2021 3 1 Patch 1 升级 无法运行项目 Android Studio Dolphin 2021 3 1
  • 【源码+文档】绘制太阳系之C语言

    一 实验任务 绘制出一个太阳系 要求 1 有详细的计算步骤 2 至少包含太阳 地球和月亮 3 用 OpenGL 进行绘制 Bonus 1 用代码实现出可执行的实例 2 绘制出行星的轨道 二 原理和分析 1 OpenGL 材质和光照 Open
  • CSS宽度问题

    一 魔法 为 DOM 设置宽度有哪些方式呢 最常用的是配置width属性 width属性在配置时 也有多种方式 width min width max width 通常当配置了 width 时 不会再配置min width max widt
  • 【华为OD机试真题 C语言】48、 寻找身高相近的小朋友

    文章目录 一 题目 题目描述 输入输出 样例1 二 思路参考 三 代码参考 作者 鲨鱼狼臧 个人博客首页 鲨鱼狼臧 专栏介绍 2023华为OD机试真题 使用C语言进行解答 专栏每篇文章都包括真题 思路参考 代码分析 订阅有问题后续可与博主解
  • 基于深度学习实现以图搜图功能

    前记 深度学习的发展使得在此之前以机器学习为主流算法的相关实现变得简单 而且准确率更高 效果更好 在图像检索这一块儿 目前有谷歌的以图搜图 百度的以图搜图 而百度以图搜图的关键技术叫做 感知哈希算法 这是一个很简单且快速的算法 其原理在于针
  • 滚蛋吧,正则表达式!

    大家好 我是良许 不知道大家有没有被正则表达式支配过的恐惧 看着一行火星文一样的表达式 虽然每一个字符都认识 但放在一起直接就让人蒙圈了 你是不是也有这样的操作 比如你需要使用 电子邮箱正则表达式 首先想到的就是直接百度上搜索一个 然后采用
  • 数据名称:中国家庭追踪调查(CFPS)数据区县码数据描述:162个区县代码,适用于10-20年份,可匹配约85-90%的样本。可依次匹配coutyid-区县行政码code-地级市行政码city-省份

    数据名称 中国家庭追踪调查 CFPS 数据区县码 数据描述 162个区县代码 适用于10 20年份 可匹配约85 90 的样本 可依次匹配coutyid 区县行政码code 地级市行政码city 省份行政码province 从而进行市或县层
  • JAVA线程究竟有几种状态?

    线程状态 线程的状态 在你 度的过程中 你会发现 答案有5种 6种 甚至还有7种的 那么究竟有几种状态 准确答案就是6种 在编译器JDK1 5以后的环境下 打开Thread进入源码看看 A thread state A thread can
  • 关于python类说法正确的是_关于Python的说法正确的是

    判断题 1 5压强是大量分子对器壁碰撞的结果 具有统计意义 单选题 1 10 在常温下有1mol的氢气和1mol的氦气各一瓶 若将它们升高相同的温度 则 单选题 1 8 单选题 2 8 一容积不变的容器内充有一定量的某种理想气体 将该理想气
  • c++中struct构造函数

    构造函数 说白了 就是初始化 具体的打法是这个样子的 struct node 构造函数 node 形参表 内容 例子 struct node node int c x c y z 0 int x y z 当然 他既然作为一个函数 那么在里面
  • Leetcode 11. Container With Most Water

    如何盛最大的水 数组代表高度 盛的水量V min height left height right 底部的长度 right left 双指针解决这个问题 从左边 右边不断逼近 逐渐取得最大值 如何进行更新 不断进行更新逼近 因为决定的是he
  • portainer使用二进制文件安装

    一 安装portainer 1 1 查看portainer版本信息 版本信息 可在此查看到每个版本的详细信息 1 2 下载文件 下载并将二进制文件 root localhost opt wget https github com porta
  • c语言 code space memory overlap,编程时Keil中常见的错误

    If px pc c warning 259 ERROR 260 pointer truncation 指针转换时部分偏移量被截断 此时指针常量 如char xdata 转为一个具有较小偏移区的 指针 如char idata ERROR 2
  • uniapp的两个跳转方式

    uniapp内置多种跳转方式 我这里介绍两个最常用的跳转 uni navigateTo和uni switchTab 前者为跳转到非TabBar页面 后者为跳转到TabBar页面 所谓TabBar就是底部导航栏配置的页面 例如下方的index
  • STM32HAL库-移植Unity针对微控制器编写测试框架

    概述 本篇文章介绍如何使用STM32HAL库 移植Unity 是一个为C语言构建的单元测试框架 侧重于使用嵌入式工具链 GitHub https github com ThrowTheSwitch Unity 硬件 STM32F103CBT
  • 【Hello Algorithm】堆和堆排序

    本篇博客简介 讲解堆和堆排序相关算法 堆和堆排序 堆 堆的概念 堆的性质 堆的表示形式 堆的增加 删除堆的最大值 堆排序 堆排序思路 时间复杂度为N的建堆方法 已知一个近乎有序的数组 使用最佳排序方法排序 堆 堆的概念 这里注意 这里说的堆
  • python爬虫可视化web展示_基于Python爬虫的职位信息数据分析和可视化系统实现

    1 引言 在这个新时代 人们根据现有的职位信息数据分析系统得到的职位信息越来越碎片化 面对收集到的大量的职位信息数据难以迅速地筛选出对自己最有帮助的职位信息 又或者筛选出信息后不能直观地看到数据的特征 一般规律 变化的趋势或者数据之间潜在联
  • 【CSS】css的background属性用法详解,background常用缩写形式

    background是一个简写属性 可以在一个声明中设置背景颜色 背景位置 背景大小 背景平铺方式 背景图片等样式 语法background 颜色 图片 位置 大小 平铺方式 bg origin 绘制区域 bg attachment bac