<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图像应用及渐变</title>
<style>
div{
width: 1000px;
height: 700px;
/* 边框：边框粗细 边框样式 边框颜色*/
border: 1px solid red;
background-image: url('../resource/image/face.jpg');
/* 默认图像是全部平铺 */
}
.div1{
/* 水平平铺 */
background-repeat: repeat-x;
}
.div2{
/* 垂直平铺 */
background-repeat: repeat-y;
}
.div3{
/* 不平铺 */
background-repeat: no-repeat;
}
/* 渐变 寻找网站：https://www.grabient.com/ */
.div4{
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>
1533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
