html更换背景

今天要改变网页的底色,因为是要改变整个网页的颜色,所以要在css中定义整个body

        body{
            background-color: rgb(226, 226, 226);
        }

这里我把背景设定为一个浅灰色,网页显示的效果如下
https://ithelp.ithome.com.tw/upload/images/20210914/201400865a6TAJ5cz3.jpg
接下来想试着把图片设为背景,语法如下

        body{
            background-image:url("https://images.unsplash.com/photo-1600456899121-68eda5705257?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=825&q=80");
        }

图片来源https://unsplash.com/photos/ZcDjyPNLQ8w
此时网页效果如下
https://ithelp.ithome.com.tw/upload/images/20210914/20140086LPcnWgGElm.jpg
可以发现图片大小无法填满画面而重复,所以会有明显的接缝处,因此再改一下图片的大小,让他可以符合萤幕的大小

            background-size: 100%;

如此一来就可以得到满版的背景图片
https://ithelp.ithome.com.tw/upload/images/20210914/20140086xsOBiuWvaT.jpg


<<:  Progressive Web App 开箱看看渐进式增强到底有多强 (1)

>>:  【Day12】系列终止

CPU反装与散热器外露

记得小大一在微积分课,老师讲到拓朴学的时候说到了一个故事,有人对囚犯说,你被关在监狱里面,囚犯却对这...

D5 - 你不知道 Combo : 前菜 Hoisting

前言 cookie(); function cookie(){ console.log('I lov...

Day 19 | 万年范例-TodoList(2)

回到昨天留下的问题 card数太长要怎麽办 TextFiled 送出後怎麽清除里面的字 其实只要将 ...

Day 08 Azure cognitive service: object detection- 匡出照片中的喵

Azure cognitive service: Object Detection- 匡出照片中的喵...

为了转生而点技能-JavaScript,day9(浅笔记-阵列结构及简易操作方法

阵列结构:依照顺序,给予值;顺序由0起算。 var array1 = [ 1, '文字', true...