当前位置: 首页 > Web前端 > CSS

CSS背景深入分析

时间:2023-03-31 12:43:18 CSS

backgroudnd是一个缩写属性,语法为:background:background-colorbackground-imageposition/background-sizebackground-repeatbackground-originbackground-clipbackground-attachmentinherit;它包含以下属性:1.background-color背景颜色,默认值为透明透明。支持几种写法:background-color:yellow;背景色:#00ff00;背景颜色:透明;背景色:rgba(250,0,255,.5);2.background-image背景图片,该值支持图片和渐变。支持多种背景设置,以逗号分隔。请注意,背景图像/渐变显示的顺序是先写后显示。2.1背景图片为图片:background-image:url(1.jpg);//一张背景图片background-image:url(1.jpg),url(2.jpg);//两张背景图,1.面试前展示的jpg>>2.2背景图是渐变色。参考我写的文章(超详细有demo):浅谈css渐变>>3.background-position与background-image结合使用,主要定义图片的位置。值可以有几种写法:3.1top/let/center/right/bottom排列组合用第一个值表示x轴,第二个值表示y轴。默认值为:lefttop如果只写一个值,则第二个值默认为center。背景位置:右中;上面的代码表示图像将从中间和最右边渲染。试一试>>3.2百分比,可以为负值3.3具体值,可以为负值