背景图片的设置
在CSS里，直接写上style. BACKGROUND就搞定了吗？是的！而里面的background-image才是我最喜欢用的属性。只要写清楚你想要哪个图片的URL或相对路径，就可以随便添加任何想得到的背景图，这样让你的网页更加吸引人。简单来说，比如主页标题用一张美美的背景图片，整个网页看起来更有味道。
选个好背景真的特重要！它能让内容更和谐，整个画面看着舒服多了。而且在看手机时，太大的图片会影响速度喔，选图时大小跟品质可得找个平衡。
别以为只有一张背景图，在CSS3里面还有个神奇的功能叫做多重背景图，可以让元素有多个背景图层，效果哇塞的很飒，能让页面瞬间高级感十足。正因为这个原因，现在做设计和编程的人越来越多了，让网页变得五彩斑斓炫丽无比
element.style.backgroundImage = "url('image.jpg')";
背景颜色的设置
不单是个好看的背景喔，STYLE.BACKGROUND还可以让你的元素变身！你只需要调用一些大家熟悉的颜色名、RGB码或使用rgba()函数，就可以轻松地调整出各种炫目的色彩和透明度！这样做出来的效果可不止一点点漂亮~网页设计中也常常用到这种方法，帮你区分好界面布局与内容展示。
你挑背景色这事儿可得看顺着网站风情和色彩搭配来看。别小瞧了这背景色，它不但能让你们看着舒服，还能把网页想表达的感觉或者意思传给你。而且，现在用的都是响应式设计，所以挑个好搭的背景色就显得尤为重要！
再来说说，把渐变色彩的背景运用到海报或者宣传单这种静态页面上真心挺好的。这样做可以增加画面的深度和吸引力，让人眼前一亮！
element.style.backgroundColor = "red";
背景重复与位置
说到背景设置，别忘了瞅瞅背景重复(background-repeat)和背景定位(background-position)这两个选项！调整下background-repeat，你就可以随心所欲地控制元素内的背景图该怎么移动！默认情况下，它是在上下左右四个方向不停循环播放的~想只在纵向上动动脑筋的话，只需设置成repeat-y就行啦；想要纵向只有一条，用repeat-x就对~不希望看到整个画面乱跑？试试no-repeat准没错！
赶紧试试background-position，轻轻一点就让你的图片和元素玩起消失游戏。使用“左”、“中”、“右”或者直接填个数字，指定你想要放置背景的地方就好！有了这神奇的特性，想让背景图隐藏在元素哪部分就藏在哪部分！
背景重复和背景定位在弄网站设计时非常有用，尤其是在特殊格局时。举个例子，比如需要做出瀑布流布局，学会用好背景定位就能让每个模块非常有条理而且好看~
固定与滚动
element.style.backgroundRepeat = "no-repeat";
除了之前讲过的那几个，style.background这个属性里面还有个非常实用且好玩儿的地方——background-attachment。这家伙可以控制你的背景图是否跟随着滚动轮子变动。没事儿，默认情况下背景图会跟着你的鼠标到处飘荡，但如果你改成了fixed模式，那它就会乖乖待在原地！
这个属性可是解决某些网页设计小难题的大帮手喔~咱们举个例子，假如你正在做单页网站，然后搞个版块设为fixed模式，不管上下左右翻滚屏幕，里头的东东嘞就是不动弹，这对顾客浏览内容就方便多，还能让整个页面变得更有趣味性和互动性呐！
其他相关属性
除了上面提到的那几个重要属性，STYLE.BACKGROUND里边还有好多其他好玩的！比如说嘛：
背景大小（背景-size）：这就是让你调整图片作为背景的大小哒。
element.style.backgroundPosition = "center";
-背景切片（backgroud-clip）：控制你的元素中，哪部分是透明的，哪部分不透明。
-试试看背景渐变吧（background-image），瞬间让你的页面超高端！
等等。
这家伙可是非常厉害的CSS属性，作用多得让你惊呆！泛泛而谈的话，用上STYLE.BACKGROUND做网页设计，感觉就像找到了宝藏，太需要它了！
element.style.backgroundAttachment = "fixed";
。
评论0