网页颜色-30天学会HTML+CSS,制作精美网站

好的网站除了内容传达之外,颜色是进入网站的第一印象,可以针对文字大小、框线、背景色...等做变化,是网站中不可或缺的样式,现在让我们来看看颜色及背景的使用技巧吧

Color 颜色

色码

以井字号为首加上六个英文数字,如果六个连续相同数值,可以写成三位数。
例如:黑色#000000可简写成#000

RGB

RGB由红色(Red)、绿色(Green)、蓝色(Blue)组成,写法为「rgb(红色值、绿色值、蓝色值)」。数值介於0-255之间,0代表最暗,数字越大越明亮。
例如:rgb(255,255,255) ⇒ 白色 、 rgb(0,0,0) ⇒黑色

如果要指定透明度,可用不透明度Alpha值,不透明度介於0-1之间,0为透明,1为不透明。写法为「rgba(红色值、绿色值、蓝色值、不透明度)」。
例如:rgba(255,255,255,0.5)

颜色名称

直接写颜色名称。
例如:红色(red)、蓝色(blue)

<h1>使用16进制</h1>
<h2>使用rgb</h2>
<p>使用颜色名称</p>
/*使用十六进制*/
h1{
	color: #000000
}
/*使用rgb*/
h2{
	color: rgba(27,0,230)
}
/*使用颜色名称*/
p{
	color: red;
}

https://ithelp.ithome.com.tw/upload/images/20210927/20112053U1Qv1sZcXm.png
色彩配色以下是我自己常用的

background 背景

background-color背景色

改变元素的背景颜色。样式设定方式与颜色相同。
范例:

<div class="text">
  背景色区块
</div>
.text{
  /* 色码设定 */
	background-color:#000; 
  /* RGB设定 */
	/* background-color:rgb(0,0,0); */
  /* 颜色名称设定 */
	/* background-color:black;  */
	color:#fff;
	padding:5px 10px;
  width:120px;
}

https://ithelp.ithome.com.tw/upload/images/20210927/2011205337aCzeoL1a.png

background-image背景图

  • url:图片的路径
  • none:无背景图
    范例:以多张图片堆叠,使用多张图时用逗号隔开,写在前面的会在图层上方
.bg-single{
  background-image: url('./img/people.png'), url('./img/bg.png');
  width: 100%;
  height: 100vh;
  background-size: 45%, cover;
  background-position: 80% bottom,center bottom;
  background-repeat: no-repeat;
}

background-image(背景图):前者为圣诞老公公,後者为背景图
background-size(背景图片尺寸):圣诞老公公图片宽度为45%,背景图为填满
background-position(背景图片位置):圣诞老公公位置在水平80%垂直在下方,背景图为水平置中垂直在下方
background-repeat为不重复
background其他属性稍後会在做详细介绍
以下范例是使用这两张图片做堆叠
https://ithelp.ithome.com.tw/upload/images/20210927/20112053OD2ua5Zuk4.png
结果:
https://ithelp.ithome.com.tw/upload/images/20210927/20112053H8XmCTxxln.png

background-repeat背景图是否重复

  • repeat:水平、垂直重复
  • repeat-x:水平重复
  • repeat-y:垂直重复
  • no-repeat:不重复
<div class="box box1">
  <div class="head">repeat:水平、垂直重复</div>
  <div class="body"></div>
</div>
<div class="box box2">
  <div class="head">repeat-x:水平重复</div>
  <div class="body"></div>
</div>
<div class="box box3">
  <div class="head">repeat-y:垂直重复</div>
  <div class="body"></div>
</div>
<div class="box box4">
  <div class="head">no-repeat:不重复</div>
  <div class="body"></div>
</div>
.box{
  width: calc(25% - 50px);
  border: 1px solid #efefef;
  margin: 10px;
  padding: 10px;
}
.box .body{
  margin-top: 10px;
  height: 150px;
  background-image: url('../img/pig.png');
}
.box1 .body{
  background-repeat: repeat;
}
.box2 .body{
  background-repeat: repeat-x;
}
.box3 .body{
  background-repeat: repeat-y;
}
.box4 .body{
  background-repeat: no-repeat;
}

https://ithelp.ithome.com.tw/upload/images/20210927/20112053mfUJkLcM8U.png

background-position背景图位置

background-position:水平设定 垂直设定
  • 数值:px、rem、%
  • 关键字:水平设定:left、center、right;垂直设定:top、center、bottom
<div class="box box1">
    <div class="head">水平:left 垂直:top</div>
    <div class="body"></div>
  </div>
  <div class="box box2">
    <div class="head">水平:left center</div>
    <div class="body"></div>
  </div>
  <div class="box box3">
    <div class="head">水平:left 垂直:bottom</div>
    <div class="body"></div>
  </div>
  <div class="box box4">
    <div class="head">水平:center 垂直:top</div>
    <div class="body"></div>
  </div>
  <div class="box box5">
    <div class="head">水平:center center</div>
    <div class="body"></div>
  </div>
  <div class="box box6">
    <div class="head">水平:center 垂直:bottom</div>
    <div class="body"></div>
  </div>
  <div class="box box7">
    <div class="head">水平:right 垂直:top</div>
    <div class="body"></div>
  </div>
  <div class="box box8">
    <div class="head">水平:right center</div>
    <div class="body"></div>
  </div>
  <div class="box box9">
    <div class="head">水平:right 垂直:bottom</div>
    <div class="body"></div>
  </div>
  <div class="box box10">
    <div class="head">水平:30% 垂直:80%</div>
    <div class="body"></div>
  </div>
.box{
  width: calc(100% / 3 - 50px);
  border: 1px solid #efefef;
  margin: 10px;
  padding: 10px;
}
.box .body{
  background-color: #efefef;
  background-repeat: no-repeat;
  margin-top: 10px;
  height: 90px;
  background-image: url('../img/pig.png');
}
.box1 .body{
  background-position: left top;
}
.box2 .body{
  background-position: left center;
}
.box3 .body{
  background-position: left bottom;
}
.box4 .body{
  background-position: center top;
}
.box5 .body{
  background-position: center center;
}
.box6 .body{
  background-position: center bottom;
}
.box7 .body{
  background-position: right top;
}
.box8 .body{
  background-position: right center;
}
.box9 .body{
  background-position: right bottom;
}
.box10 .body{
  background-position: 30% 80%;
}

https://ithelp.ithome.com.tw/upload/images/20210927/20112053SH53y9HfaG.png
以上范例是针对不同的设定,背景图的位置
我自己比较常用的地方是有图片的列表资讯,有时候客户上传图片尺寸不一样,导致图片高度不一致,所以会设定高度,将图片填满在框框里面,不管客户上传各式的尺寸,版面看起来也都会一致。
以下这是设置图片,在class="img"没设置高度,所以图片尺寸不同就会导致跑版

<div class="box box1">
    <div class="img">
      <img src="img/img1.jpg" alt="">
    </div>
    <div class="body"> Fusce consectetur rhoncus malesuada. Cras ut condimentum mauris, sed interdum mi. Sed et sagittis tellus.</div>
  </div>
  <div class="box box2">
    <div class="img">
      <img src="img/img2.jpg" alt="">
    </div>
    <div class="body"> Fusce consectetur rhoncus malesuada. Cras ut condimentum mauris, sed interdum mi. Sed et sagittis tellus.</div>
  </div>
  <div class="box box3">
    <div class="img">
      <img src="img/img3.jpg" alt="">
    </div>
    <div class="body"> Fusce consectetur rhoncus malesuada. Cras ut condimentum mauris, sed interdum mi. Sed et sagittis tellus.</div>
  </div>
  <div class="box box4">
    <div class="img">
      <img src="img/img4.jpg" alt="">
    </div>
    <div class="body"> Fusce consectetur rhoncus malesuada. Cras ut condimentum mauris, sed interdum mi. Sed et sagittis tellus.</div>
  </div>
  <div class="box box5">
    <div class="img">
      <img src="img/img5.jpg" alt="">
    </div>
    <div class="body"> Fusce consectetur rhoncus malesuada. Cras ut condimentum mauris, sed interdum mi. Sed et sagittis tellus.</div>
  </div>
  <div class="box box6">
    <div class="img">
      <img src="img/img6.jpg" alt="">
    </div>
    <div class="body"> Fusce consectetur rhoncus malesuada. Cras ut condimentum mauris, sed interdum mi. Sed et sagittis tellus.</div>
  </div>
.box{
  width: calc(100% / 3 - 50px);
  border: 1px solid #efefef;
  margin: 10px;
  padding: 10px;
}
.box .img img{
  width: 100%;
}
.box .img{
  margin-bottom: 10px;
}

https://ithelp.ithome.com.tw/upload/images/20210927/20112053OVFlyjoPV6.png

.box{
  width: calc(100% / 3 - 50px);
  border: 1px solid #efefef;
  margin: 10px;
  padding: 10px;
}
.box .img{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 150px;
  margin-bottom: 10px;
}
.box1 .img{
  background-image: url('../img/img1.jpg');
}
.box2 .img{
  background-image: url('../img/img2.jpg');
}
.box3 .img{
  background-image: url('../img/img3.jpg');
}
.box4 .img{
  background-image: url('../img/img4.jpg');
}
.box5 .img{
  background-image: url('../img/img5.jpg');
}
.box6 .img{
  background-image: url('../img/img6.jpg');
}

https://ithelp.ithome.com.tw/upload/images/20210927/20112053tW0OgH3DHE.png

background-size背景图大小

  • 数值:px、rem、%
  • 关键字:
    • contain:图片可以完整地被显示,会等比例缩放在指定范围内
    • cover:图片等比例放大,填满区块,但图片会被裁切掉
<div class="box box1">
  background-size: cover;
  <div class="img"></div>
</div>
<div class="box box2">
  background-size: contain;
  <div class="img"></div>
</div>
.box{
  width: calc(100% / 3 - 50px);
  border: 1px solid #efefef;
  margin: 10px;
  padding: 10px;
}
.box .img{
  margin-top: 10px;
  height: 300px;
  background-repeat: no-repeat;
  background-color: #efefef;
  background-image: url('../img/img.jpg');
}
.box1 .img{
  background-size: cover;
}
.box2 .img{
  background-size: contain;
}

https://ithelp.ithome.com.tw/upload/images/20210927/20112053zcdOCvAzYF.png

background-attachment背景图是否随内容滚动

  • scroll:背景会跟随页面滚动,预设值
  • fixed:背景不会跟随页面滚动
<div class="box box1"></div>
<div class="box box2"></div>
.box{
  width: 100%;
  height: 600px;
  background-size: cover;
  background-repeat: no-repeat;
  
}
.box1{
  background-attachment: fixed;
  background-image: url('img1.jpg');
}
.box2{
  background-image: url('img2.jpg');
}

将第一张背景图样式设定为fixed,不会随画面滚动,下方背景图向上滚动就会有滚动视差
https://ithelp.ithome.com.tw/upload/images/20210927/20112053zWhGJS29M6.png
https://ithelp.ithome.com.tw/upload/images/20210927/201120537SreWNltLd.png

background统一设定背景相关属性

backgorund: [color] [image] [position] [size] [repeat] [attatchment] [origin] [clip]

需要注意的是,如果background-size与background-position同时存在时,要用斜线隔开

.box{
	background: #000 url(img/bg.png) no-repeat center bottom/cover;
}

linear-gradient 渐层

线性渐层

background:linear-gradient(方向, 颜色1 位置, 颜色2 位置);

方向

用英文或角度表示,预设是由上往下
https://ithelp.ithome.com.tw/upload/images/20210927/201120534fXxmUdepD.jpg
范例:
由上而下 to bottom,下面这五种写法,产生出来的结果会是一样的

.box{
  width: 200px;
  height: 200px;
  background:linear-gradient(rgba(240,249,255,1), rgba(161,219,255,1));
  /* background:linear-gradient(to bottom, rgba(240,249,255,1), rgba(161,219,255,1)); */
  /* background:linear-gradient(180deg,rgba(240,249,255,1), rgba(161,219,255,1)); */
  /* background:linear-gradient(to top, rgba(161,219,255,1), rgba(240,249,255,1)); */
  /* background:linear-gradient(to bottom, rgba(240,249,255,1) 0%, rgba(161,219,255,1) 100%); */
}

https://ithelp.ithome.com.tw/upload/images/20210927/201120534kISljBj98.png

颜色位置

多种渐层色

起点颜色到终点颜色0%-100%,至少会有两个颜色,如果中间会再有第三个颜色,用百分比设置第三个颜色位置。

.box {
  width: 200px;
  height: 200px;
  background: -moz-linear-gradient(top, rgba(180, 227, 145, 1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(180, 227, 145, 1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
  background: linear-gradient(to bottom, rgba(180, 227, 145, 1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
}

https://ithelp.ithome.com.tw/upload/images/20210927/20112053qOVYMX1ZRS.png

颜色重叠
.box {
  width: 200px;
  height: 200px;
  background: -moz-linear-gradient(-45deg, rgba(109,179,242,1) 50%, rgba(30,105,222,1) 50%);
  background: -webkit-linear-gradient(-45deg, rgba(109,179,242,1) 50%,rgba(30,105,222,1) 50%);
  background: linear-gradient(135deg, rgba(109,179,242,1) 50%,rgba(30,105,222,1) 50%);
}

https://ithelp.ithome.com.tw/upload/images/20210927/20112053opG7iTsgj3.png

放射状渐层

background:radial-gradient(形状 长度 at 位置, 颜色1 位置, 颜色2 位置);

形状

有圆形(circle)及椭圆形(ellipse),圆形设定尺寸时,只需要给一个数值;椭圆形需给x轴与y轴的尺寸
范例:圆形,渐层半径80px

    background:radial-gradient(circle 80px,#FFB76B,#D83900);

https://ithelp.ithome.com.tw/upload/images/20210927/20112053a7bAzZodsb.png

范例:椭圆形,渐层半径水平200px,垂直100px

    background:radial-gradient(ellipse at 200px 100px,#FFB76B,#D83900);

https://ithelp.ithome.com.tw/upload/images/20210927/20112053kKFqe03KoH.png

长度

可使用关键字或是设定尺寸

  • closest-side:接近方块边
  • farthest-side:最远方块边
  • closest-corner:最近方块角
  • farthest-corner:最远方块角 ( 预设值 )
    <div class="box closest-side">最近边</div>
    <div class="box farthest-side">最远边</div>
    <div class="box closest-corner">最近角</div>
    <div class="box farthest-corner">最远角 ( 预设值 )</div>
.box{
  width: 250px;
  height: 100px;
  margin-bottom: 5px;
  padding: 10px;
  color: #fff;
}
.closest-side{
  background:radial-gradient(circle closest-side at center,rgba(109,179,242,1),rgba(30,105,222,1));
}
.farthest-side{
  background:radial-gradient(circle farthest-side at center,rgba(109,179,242,1),rgba(30,105,222,1));
}
.closest-corner{
  background:radial-gradient(circle closest-corner at left,rgba(109,179,242,1),rgba(30,105,222,1));
}
.farthest-corner {
  background:radial-gradient(circle farthest-corner at left,rgba(109,179,242,1),rgba(30,105,222,1));
}

https://ithelp.ithome.com.tw/upload/images/20210927/20112053czmyBfpo1X.jpg

这是我常用的渐层产生器网站 Colorzilla Gradients ,设定好颜色之後,就可以复制旁边的语法
https://ithelp.ithome.com.tw/upload/images/20210927/20112053KEJHGV3J7y.png

相信你对颜色、背景图及渐层背景使用有一定的了解,依据网站主视觉颜色传达形象,来营造出网页整体的视觉风格。

参考资料:
https://www.oxxostudio.tw/articles/202008/css-gradient.html


<<:  用React刻自己的投资Dashboard Day12 - 下拉式选单筛选功能

>>:  Day 13:100. same tree

[Day22] Rust 直接使用资料库语法操作资料库 (Part1)

我真的不懂 一篇水篇 100 多 正常的 20多 是不是搞错了什麽 总之开始今天的内容吧 那麽今天...

二元树之 IF 上策 - DAY 17

假如用人数去施打疫苗图表 人数是概略计算非准确值 算一下总触发 IF 次数 348.5万 * 1 +...

Swift纯Code之旅 Day11. 「TableView(3) - 实作Delegate & DataSource」

前言 昨天已经将 addAlarmTableViewCell 在 addAlarmTableView...

android studio 30天学习笔记 -day 2 -icon

在这次的专案开发有用到vector asset,里面有一些可以应用在专案开发的向量图形,如以下图形:...

[Vue2] 从初学到放弃 Day3-Vue架构

Vue 主要架构 此图片来源 Vue官方网站 建立compoent // Define a new ...