背景缩写属性可以在一个声明中设置所有的背景属性。可以设置的属性分别是:background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image。如果上述值缺少一个,也是可以的。
语法:background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

background: url("~assets/img/common/collect.svg") 0 0/14px 14px 说明:
第一个数字0表示背景颜色:

改为pink后:

第二个0/14px的含义:
0 是background-position的属性简写。background-position 属性设置背景图像的起始位置。
14px 是background-size的属性简写。background-size 属性规定背景图像的尺寸。
最后14px和前面14px共同构成background-size:(这个14px可省略)

CSS: 对background: url(“~assets/img/common/collect.svg“) 0 0/14px 14px 的理解相关推荐

  1. CSS背景background设置

    笔记来源:尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版 文章目录 1. 背景 back-ground-color background-image backgroun ...

  2. css中background属性引入图片url()中地址

    网络图片: background: url(https://58d.oss-cn-hangzhou.aliyuncs.com/website2022/shoes.png); 本地图片: 1.项目内部: ...

  3. css的background

    背景属性--background是css中的核心属性.你应该对它有充分的了解.这篇文章详细讨论了background的所有相关属性,甚至包括background-p_w_upload,还为我们介绍了它 ...

  4. background:url(./images.png) no-repeat 0 center的用法

    background:url(./images.png) no-repeat 0 center; //图像地址 不重复 水平位置0 垂直位置居中 background:url(./images.png ...

  5. css背景图加载太慢怎么办,CSS实现background背景图优化,快速加载图片

    之前写过一篇:CSS中background属性总结整理了background 的常用属性. 日常项目中经常会用到全屏的图片, .png 和 .jpg 的图片都太大,加载缓慢. 我们可以使用webP格式 ...

  6. 学习CSS的background属性及其取值(实践)

    CSS的背景属性 属性 描述 可用值 background 设置背景的所有控制选项 其他背景属性可用值的集合 background-color 设置背景颜色 命名颜色.十六进制颜色等 backgrou ...

  7. CSS 背景(background)+背景透明(CSS3)

    CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置. background-color 背景颜色 background-image 背景图片地址 backgr ...

  8. CSS(3) Background(背景)

    一.CSS 背景 1.CSS 背景属性用于定义HTML元素的背景.CSS 属性定义背景效果: background-color background-image background-repeat b ...

  9. html图片背景属性,css 背景(background)属性、背景图定位

    background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

  10. 【前端小点】CSS之background背景属性详解

    本篇文章我们将一起展开来看css的background背景属性. 一.结构 创建DIV <div class="div1">1 </div> 样式 widt ...

最新文章

  1. Theme,skin-----asp.net2.0 new technolog
  2. java怎么让表格的字段相乘,excel表格怎么让数据相乘-如何在excel表格中设置乘法公式...
  3. Android设计模式——单例模式(Singleton)
  4. 【2040】反向输出序列
  5. python基础----python的使用(四)
  6. 最短路最基本算法———Floyd算法
  7. python 枚举相等判断_python中is和==的区别
  8. 在中国南方电网工作是一种怎样的体验?
  9. python 中__init__ 与 __call__ 的区别
  10. Python3常用正则表达式
  11. Linux ssh 配置
  12. html中div页面布局,前端入门篇(二):利用Div + CSS快速布局页面
  13. 东芝笔记本linux系统安装驱动,最详实解决方案 笔记本安装驱动指南!
  14. 计算机系统中文件命名的,你电脑上的文件命名规范吗
  15. Python 文件,文件读取一行(readline)
  16. 从pdf复制文字到word中的问题
  17. MySQL从入门到精通
  18. 元宵节主题微信红包封面序列号免费领取!
  19. 【Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比
  20. ocx插件: AniGIF.ocx安装

热门文章

  1. Retina屏下的图片优化
  2. 2021年11月 | openGauss走进高校活动系列回顾
  3. 【Kind2(基于SMT的自动模型检查器)学习笔记】基本语法
  4. Lombok插件下载与离线安装
  5. html 自动切换tab栏,html 实现tab切换的示例代码
  6. google广告分类
  7. 深度学习李宏毅21春_16_GAN_P3
  8. 使用代理服务器解决升级WordPress慢的问题
  9. android 没有menu菜单键,android之onCreateOptionsMenu失效,按菜单键无反应
  10. 现身说法 程序员 35 岁后的出路