C/C++教程

背景——集大成的background

本文主要是介绍背景——集大成的background，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

摘抄于：https://www.cnblogs.com/nostic/articles/5269066.html

background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：
background-color
background-position
background-repeat
background-origin
background-clip
background-attachment
background-image
如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

语法

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
值 说明 CSS
background-color 指定要使用的背景颜色 1
background-position 指定背景图像的位置 1
background-size 指定背景图片的大小 3
background-repeat 指定如何重复背景图像 1
background-origin 指定背景图像的定位区域 3
background-clip 指定背景图像的绘画区域 3
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1
background-image 指定要使用的一个或多个背景图像

background-size，这个要单独设置，在background里不行（虽然有人说行，但是我试了不行）

值 描述
length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

background-position

值 描述
left top，left center，left bottom，right top，right center，right bottom，center top，center center，center bottom 如果仅指定一个关键字，其他值将会是"center"
x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit 指定background-position属性设置应该从父元素继承

background-origin指定容器类型，才能得到想要的position（当没有设置padding，border的时候这些都看不出效果）

background-clip和这个是一样的，只是background-clip是用来设置背景颜色的，而background-origin是用来设置背景图片的

值 作用
padding-box 以padding的外边为准
border-box 在border里，border是有厚度的，是以border的外边为准，而处于内边-外边之间的被裁剪了
content-box 在内容框里，会被padding/border裁剪

background-repeat

值 说明
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image 不会重复
inherit 指定 background-repeat 属性设置应该从父元素继承

background-attachment

值 描述
scroll 背景图片随着页面的滚动而滚动，这是默认的。
fixed 背景图片不会随着页面的滚动而滚动。
local 背景图片会随着元素内容的滚动而滚动。
initial 设置该属性的默认值。 阅读关于 initial 内容
inherit 指定 background-attachment 的设置应该从父元素继承。 阅读关于 inherit 内容

background-image这个比较特殊，涉及到渐变，要重新来一页纸

https://www.cnblogs.com/Lilc20201212/p/15986999.html

这篇关于背景——集大成的background的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航