铁人赛 Day9 -- 一定要知道的 CSS (六) -- background-color/background-image

前言

背景是一个如此重要的东西,你能想像萤幕的话棉全都是白底或黑底吗!!当然不行啊!!

background-color

这个我们在 铁人赛Day4就有提到过了,那我一样再说一次哈哈,就不用再跑到第四天了

Div背景颜色

-->系统预设为 #fff 白色,若要其他颜色可以修改 #fff 去做变更

撰写小撇步 : bgc 後按下 Tab
例如 : bgc + Tab 会自动产生 background-color: #fff;

<style>
    .banner{
        background-color: #fff;
    }    
</style>

在此附上色码表https://www.toodoo.com/db/color.html

background-image

相信大家一定看过很多网站的背景是一张照片,那他就是使用了 background-image

background-image : url('照片档案位置') ;

-->照片位置可以使用绝对路径与相对路径,
而若要单使用档名(例:背景.jpg),照片需和程序档在同一个资料夹中

预设值为原本照片的大小。

而照片也只会显示在Div区块的范围内所以当今天照片的大小超过Div区块的时候,
就会发生裁切的状况。

原始照片(798*553)
https://ithelp.ithome.com.tw/upload/images/20210909/20141189jVBOYxXmFD.jpg
但放到一个长宽只有 300p x的 Div区块内时,就会被裁切掉
https://ithelp.ithome.com.tw/upload/images/20210909/20141189a76igGd8bH.jpg

今天先简单的来讲简单的background,明天我们花一点时间来讲 background:linear-gradient(渐层背景)
https://ithelp.ithome.com.tw/upload/images/20210909/20141189OJL8zxWI90.jpg
那我们铁人赛Day10见罗!!


<<:  Python 关系运算符号和if用法

>>:  Day09:气泡排序(Bubble Sort)

Day16 简易资料库RealmSwift小实作3

继续昨天~ 再来回到系统所帮我们修复的两个func,刚刚说到第一个函数的作用,那我们这边将要回传几个...

Day18:SwiftUI Picker

前言 SwiftUI Picker 可以让我们自行选择项目, 也可以选择不同的呈现方式, 这篇文章来...

D13-(9/13)-鸿海(2317)-iPhone组装概念股

注:发文日和截图的日期不一定是同一天,所以价格计算上和当日不同,是很正常的。 声明:这一系列文章并无...

【Day19】:PWM输出-模拟类比讯号

PWM-脉冲宽度调变 我相信很多人在使用Arduion的时候还是不清楚PWM到底在干嘛? PWM是一...

透明这回事

前言 透明向来是敏捷强调的,Scrum 更是把透明列为三大支柱之一,今天想跟大家分享一下我对透明的看...