【css】background笔记

Youngs 发布于2019-08-30 13:01 / 868人阅读

摘要：之前笔试题有一道选择题是关于属性的，后来查阅资料才发现有各种子属性，特写此文章整理一下。新增指定背景的显示区域。默认情况下，总是以元素左上角为坐标原点进行背景图像定位。此关键字表示背景相对于元素的内容固定。

之前笔试题有一道选择题是关于background属性的，后来查阅资料才发现background有各种子属性，特写此文章整理一下。

浏览器兼容性支持

PC端：

移动端：

background属性 【盒模型】

background-image

定义背景图像。

background-color

定义背景颜色。

background-origin【css3新增】

指定背景的显示区域。默认情况下，总是以元素左上角为坐标原点进行背景图像定位。
值：border-box | padding-box | content-box

border-box 从边框区域开始显示背景,背景会延伸到外边界的边框，但边框在上，背景在下。

padding-box 从补白区域开始显示背景，背景延伸到最外边界的padding，边框不会有背景出现。

content-box 仅在内容区显示背景

background-clip【css3新增】

指定背景的裁剪区域。
值：border-box | padding-box | content-box
【看栗子】
#mydiv{ padding: 25px; border: 10px dotted #000; background-color:yellow; }

border-box 背景会延伸到外边界的边框，但边框在上，背景在下。

padding-box 从补白区域开始显示背景，背景延伸到最外边界的padding，边框不会有背景出现。

content-box 仅在内容区显示背景

background-repeat

设置背景图像是否及如何重复铺排
/ 单值语法 /
background-repeat: repeat-x;//相当于 repeat no-repeat
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/ 双值语法: 水平horizontal | 垂直vertical /
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;

repeat
图像会按需重复来覆盖整个背景图片所在的区域. 如果大小不合适，最后一个图像会被裁剪,

space 【当前没有广泛支持】
图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. background-position属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像.

round 【当前没有广泛支持】
随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.关键是浏览器怎么计算什么时候应该添加一个图像进来, 而不是继续伸展.

no-repeat
图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由background-position属性来决定.

background-size【css3新增】

定义背景图片大小
/ 关键字 /
background-size: cover //缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
background-size: contain //缩放背景图片以完全装入背景区，可能背景区部分空白

/ 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto /
background-size: 50% //相对背景区【由background-origin设置】的百分比
background-size: 3em
background-size: 12px
background-size: auto //以背景图片的比例缩放背景图片

/ 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度 /
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/ 逗号分隔的多个值：设置多重背景 /
background-size: auto, auto / 不同于background-size: auto auto /
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

background-size: inherit
可以看MDN提供的例子

background-position

设置背景图像的位置
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 25% 75%;
background-position: 0px 0px, center;

background-attachment

定义背景图像的显示方式。
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

fixed
此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

local
此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

scroll
此关键字表示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。

【background-origin vs background-clip】

background-clip用来判断背景是否包含边框区域.
background-origin是用来决定background-position定位的参考位置。

云服务器 GPU云服务器 Background _background background:url 和Background

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115244.html

【代码笔记】Web-CSS-CSS background背景

摘要：实例改文本插入在元素中该段落有自己的背景颜色背景图片不重复，设置实例背景图片只显示一次，并与文本分开实例中还添加了属性用于让图片与文本间隔开参考资料菜鸟教程一，效果图。二，代码。 DOCTYPE html> CSS backgrounds h1 { background-color: #6495ed; } ...

番茄西红柿 2019-04-23 11:54 评论0 收藏0
CSS学习笔记之定位

摘要：的盒子及相关盒子基础，，版式边框。可以设置盒子内容区与边框的间距。将其设为则其空间可以被复用。把图片调整到像素宽，像素高。拉大图片，使其完全填满背景区保持宽高比。简写简写后可以添加多张背景图片，用，隔开，最先添加的在上层 CSS的盒子及相关盒子基础 postion，float，display——版式  边框（border）。可以设置边框的宽窄、样式和颜色。  内边距（pa...

Lavender 2019-08-28 18:02 评论0 收藏0
CSS学习笔记(七) 背景

摘要：任何方向上都不重复只让背景图片显示一次。，背景图片就会以段落的中心点为起点。第一个值表示水平位置，第二个值表示垂直位置。拉大图片，使其完全填满背景区保持宽高比。提示渐变是帮我们生成的背景图片。在CSS里面，每个元素盒子都可以想象成由两个图层组成。前景层：内容（如文本或图片）和边框。背景层：用实色填充（使用 background-color 属性），也可以包含任意多个背景图片（...

Pikachu 2019-08-28 18:03 评论0 收藏0
【零基础入门】 css学习笔记（2）盒模型

摘要：盒模型，盒模型看待元素的一种方式，它将每个元素看作由一个盒子表示。盒子实际占用的大小是左左右右，属性细节一个块元素的默认宽度是，表示它会自动延伸占满可用的空间。表示元素之间的距离，在边框外部。不能对和指定颜色，添加任何装饰。盒模型 1，盒模型： CSS看待元素的一种方式，它将每个元素看作由一个盒子表示。 2，五个属性：从内往外： width:内容的宽度，而不是盒子的宽度； hei...

mrcode 2019-08-30 15:53 评论0 收藏0
css编码技巧【css揭秘读书笔记】

摘要：最近在看揭秘，于是写了文章来作笔记，除此以外还会补充一些自己遇到的笔试题。举例说明以上的代码有什么问题呢如果需要改变字号，那么同时需要调整行高。那么经过修改后的代码如下关于使用还是还是百分比，需要根据具体情况来决定。最近在看《css揭秘》，于是写了文章来作笔记，除此以外还会补充一些自己遇到的笔试题。希望大家都有所收获。 css编码技巧尽量减少代码重复在实践中，代码可维护性的最大要...

Miyang 2019-08-30 12:59 评论0 收藏0