CSS的background简写方式

参考资料

作者:RunningCoderLee
链接:https://www.jianshu.com/p/fa07c2606380
來源:简书

其他资料 CSS3参考手册 https://www.css88.com/book/css/properties/background/background.htm

在CSS2.1里,background属性的简写方式包含五种属性值,从CSS3开始,又增加了3个新的属性值,加起来一共8个。

CSS2.1

  • background-color 使用的背景颜色。
  • background-image 使用的背景图像。
  • background-repeat 如何重复背景图像。
  • background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
  • background-position 背景图像的位置。

CSS3

  • background-size 背景图片的尺寸。
  • background-origin 背景图片的定位区域。
  • background-clip 背景的绘制区域。
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

需要注意的是里面的/,它和font以及border-radius里简写方式使用的/用法相似。/可以在支持这种写法的浏览器里在background-position后面接着写background-size。
除此之外,你也可以增加另外两个描述它的属性值: background-origin和 background-clip

示例用法

.example {
  background: aquamarine
              url(img.png)
              no-repeat
              scroll
              center center / 50%
              content-box content-box;
}

原文地址:https://www.cnblogs.com/gleamer/p/10257459.html

时间: 2024-10-14 09:19:46

CSS的background简写方式的相关文章

0065 animation:动画、动画序列、动画常见属性、 动画简写方式、速度曲线细节、案例大数据热点图、案例奔跑的熊大

什么是动画 动画是 CSS3 中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果 动画的基本使用 先定义动画 在调用定义好的动画 语法格式(定义动画) /* keyframes: 关键帧 */ @keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px } } 语法格式(使用动画) div { /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animati

css基础-Background&Text

css基础-Background&Text     以下笔记为复习css的一些基础,每一节我都做了一个简单的总结事例,以便参考: 1 /*CSS 属性定义背影效果: 2 3 background-color 定义了元素的背景颜色. 4 background-image 定义了元素的背景图像. 5 background-repeat 定义是否重复 6 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 7 background-position 改变图像在背景中

background简写属性

在CSS中有多个属性用于设置背景样式,其中 background-color:设置背景颜色. background-image:指定使用的背景图片 background-repeat:设置是否以及如何重复背景图像 background-position:设置背景图像的起始位置 background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动 我们可以分别使用以上单个属性,但通常建议使用background简写属性,这在较老的浏览器中有更好的支持,更加简洁. backgr

CSS背景background、background-position使用详解

背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性). css2 中的背景(background) 概述 CSS2 中有5个主要的背景(background)属性,它们是: * p

CSS 背景background实例

css背景background用于设置html标签元素的背景颜色.背景图片已经其他背景属性.本文章向码农介绍CSS 背景background使用方法和基本的使用实例.需要的码农可以参考一下. 一.Css background背景语法 CSS背景基础知识 CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式. 背景语法: background: background-color || background-image || background-repeat || back

网页中使用css的几种方式简单介绍

网页中使用css的几种方式简单介绍: css在当前的网页中可以说是必须的,如果没有使用css,那么这个网页一般丑陋的难以想象,下面就介绍一下网页使用css的几种方式,希望对初学者能够有所帮助. 一.内联样式: 所谓的内联样式就是卸载标签之内的样式,代码如下: <div style="color:red;font-size:10px"></div> 也就是使用style方式在标签内规定div的样式. 二.内部样式表: 所谓内部样式表,就是样式表写在当前页面,而不是

CSS属性的简写

在需要显示地设置所有值的情况下,应尽量限制使用简写的属性声明. 常见的滥用: padding, margin, font, background, border, border-radius [??这不就是我经常简写的么] 大部分情况下,我们不需要为简写形式的属性声明指定所有值. 例如,HTML 的 heading 元素只需要设置上.下边距(margin)的值,因此,在必要的时候,只需覆盖这两个值就可以. 过度使用简写形式的属性声明会导致代码混乱,并且会对属性值带来不必要的覆盖从而引起意外的副作

css样式的引入方式

首选来介绍一下什么是CSS?(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言,其实就是一种层叠样式表. CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力. 就像造房子一样,如果html是基地的话,那么CSS就是装修,只有装修的房子

前端之CSS的属性引入方式、选择器、选择器优先级

目录 1011 前端之CSS的属性引入方式.选择器.选择器优先级 一.CSS介绍 二.CSS语法 2.1CSS实例 2.2 CSS注释 三.css属性的引入方式 3.1 行内样式 3.2 内部样式 3.3 外部样式 四.CSS选择器 4.1 元素(标签)选择器 4.2 id选择器 4.3 类选择器 4.4 通用选择器 4.5 后代选择器 4.6 儿子选择器 4.7 毗邻选择器 4.8 兄弟选择器 4.9 属性选择器 4.10 分组和嵌套选择器 4.11 伪类选择器 4.12 伪类元素选择器 五.