CSS背景看这一帖就差不多了

马黑黑 · 发表于 2022-1-6 09:16

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

CSS背景 | 马黑黑

HTML支持对可视网页对象设置背景，但功能相对简单、粗糙，还是CSS对盒子背景的设置更为丰富细致。

一、背景色

简化语法：background:#000;
标准语法：background-color:#000;

简化语法又称缩写语法，它简化的意义在于可以用一个语句同时表示多个属性，而标准语法是针对单一属性的。

background-color 以纯色设置HTML可视对象的背景。有时候，纯色的效果过于单调，这时，我们可以考虑用 rgba 的颜色表达法，它能给元素的背景色设计一个alpha透明效果：

background-color:rgba(0,0,0,0.8);

二、背景图像

CSS设置对象底图功能比你想象的厉害，它可设置底图尺寸、位置、重复与否、覆盖范围，甚至可以设置多个底图。

缩写语法：background:url(图片);
标准语法：background-image:url(图片)

论坛中因论坛程序对字符串的处理机制，图片地址起止处要用小角引号（建议用单引号）。

图片默认是平铺展开的，要控制底图是否平铺，以及其它的功能，我们需要：

（一）重复

background-repeat:repeat/no-repeart/repeat-x/repeat-y;

缺省值 repeat，no-repeat 图像只出现一次，repeat-x 和 repeat-y 是横向、纵向铺开。

所谓缺省值，指没有设置某个属性的时候，系统默认采用的设定。比方说重复与否，缺省值是repeat，若没有指定 background-repeat，则默认是 repeat 的。

（二）位置

background-position:top/left/bottom/right/center

left之类的表达，还可以组合表达，如 top right；可以 xy 像素值，如 50px 50px；百分比也可以用。

设置多个底图时，必需给定图像位置，平铺的那张也要给，否则图片堆叠在一起，只能看到第一张。

（三）大小

background-size:xpx ypx/n% n%

宽度与高度表达，如 background-size:300px 200px; 或 background-size:50% 50%

图片大于背景尺寸，或因需要，可以也应该设置背景图的大小，整体效果更为理想。

（四）裁剪

background-clip:border-box/padding-box/content-box/text

这些值的作用：

border-box ：背景延伸至边框外缘（保留边框）
padding-box：背景延伸至内边距外缘
content-box：背景覆盖内容区（直达但不突破内边距内缘）
text ：背景被裁剪成文字的前景色（浏览器有限支持）

使用 text 值时，因为浏览器的开发滞后于CSS的发展，对此设置的支持度不是很好。使用用如下语句兼容性更佳：

-webkit-background-clip:text;

（五）多个背景图

简化语法：background:url(图1),url(图2)
标准语法：background-image:url(图1),url(图2);

当使用多个图片做底图，每个属性也是用英文逗号分隔对应各图的值，例如设置它们的重复与否和位置：

background-repeat:no-repeat,repeat;
background-position:right top,leftbottom;

简化语法则如此表示：

background: url(图1) no-repeat, url(图2) repeat;

注意，如果设置不当或不设置，多图做底图时会出现不可预期的效果。

CSS背景的内容不止这些，但领会了上面这些就已经差不多了，够用，又是深入学习下去的基础。