CSS背景属性与动态效果(DAY13)
这篇文章要介绍有关背景的CSS属性，包括背景颜色、图片、透明度、滚动，背景图片的重复，背景的位置以及背景的动态变换等，非常多的属性和效果，以下会先介绍属性的语法，再实际作范例来看看网页呈现的效果!
-
背景相关属性
背景颜色
属性:background-color:
背景图片
属性:background-image:url("")
背景透明度
属性:opacity:
(背景和背景上的文字将会一起变透明)
属性:background:rgba( , , , )
Ex: background: rgba( 128,0 ,0 ,0.5 )
(背景上的文字不会跟着背景一起变透明)
上面的Ex中代表r(红)的属性值为128，g(绿)、b(蓝)的属性值为0，和opacity透明度的属性值为0.5 (0~1)(完全透明~完全不透明)
背景滚动
属性:background-attachment:
属性值:fixed(固定)、scroll(滚动)
(fixed意思是在拉网页右方的滚动轴时，背景图片还是固定不动在原本的位置;而scroll将会随着滚动轴的操作移动)
背景图片的重复
属性:background-repeat:
属性值:
repeat(预设):水平与垂直方向都会重复
no-repeat:不重复
x-repeat:沿着水平方向重复
y-repeat:沿着垂直方向重复
背景位置
属性:background-position:
属性值:可以使用top、center、bottom(垂直位置)，left、center、right(水平位置)，也可以使用之前介绍过的单位(%、px等)
-
动态效果
<style>
body {
animation-name: example;
/*动画名称(需和@keyframes的动画名称一样)*/
animation-duration: 8s;
/*动画历经时间*/
animation-iteration-count:infinite
/*无限循环*/
}
@keyframes example {
/*(@keyframes是用来建立动画的属性，example是动画名称，可自订名称)*/
from {
/*动画开始的效果*/
}
to {
/*动画结束的效果*/
}
</style>
范例1
开启网页时将会自动把一开始设定的背景颜色慢慢地转换成另一种颜色，并且重复循环!
<head>
<style>
body {
background-color: aliceblue;
animation-name: example;
animation-duration: 8s;
animation-iteration-count:infinite
}
@keyframes example {
from {
background-color:antiquewhite;
}
to {
background-color:azure;
}
}
</style>
</head>
<body>
<div style="text-align:center">
<h1>乐气球嘉年华</h1>
<video src="IMG_4736.MOV" controls></video>
</div>
</body>
范例2
将按钮button的背景设为白色透明，就能看到div区块的背景图片显现在button上，并且滑鼠移至button上方时会变换button的背景颜色!
<style>
div.background {
background: url(doraemon.jpg) repeat;
border: 2px solid black;
text-align:center;
}
.other{
margin: 5px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
width:160px;
height:160px;
}
.other:hover{
background-color:burlywood;
}
</style>
</head>
<body>
<div class="background">
<input style="font-size:xx-large;font-weight:900 " type="button" value="侏罗纪" class="other">
</div>
</body>
结语
这篇文章介绍了CSS与背景相关的属性，和一些动态效果的属性，并将背景的属性与动态效果的属性结合起来做了两个例子，下一篇将会介绍CSS BOX的model模型!
>>: 2021-Day21. Serverless（九）：Google Container Registry - 部署
Day32. 范例：资料库连线（单例模式）
本文同步更新於blog 需求一：客户想要能与资料库连线的类别 <?php namespac...
服务器安装libsodium支持chacha20&salsa20
使用 salsa20 或 chacha20 或 chacha20-ietf 算法，需要安装 libs...
DAY14 MongoDB 索引属性与进阶注意事项
DAY14 MongoDB 索引属性与进阶注意事项 昨天的文章介绍了各种索引以及建立方式，这篇会讲一...
[Day12]ISO 27001 标准：验证范围
其实 ISO 系统都是通用的，从 ISO 9001、 ISO 14001、 ISO 50001、IS...
Day 2: LeetCode 978. Longest Turbulent Subarray
Tag:随意刷-每月挑战(2021.09.15) Source: 978. Longest Turb...