3.7、背景
背景颜色
背景图片
div {
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/QQ.jpg");
/*默认是全部平铺的 repeat*/
}
.div1 {
background-repeat: repeat-x;
}
.div2 {
background-repeat: repeat-y;
}
.div3 {
background-repeat: no-repeat;
}
练习:
核心代码:
/*颜色,图片, 图片位置, 平铺方式*/
background: red url("../images/d.jpg") 270px 10px no-repeat;
background-image: url("../images/r.jpg");
background-repeat: no-repeat;
background-position: 200px 2px;
代码结构:
效果图:
3.8、渐变
background-color:#FFFFFF;
background-image:linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%,#FF0000 100%)
代码show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 径向渐变,圆形渐变-->
<style>
body {
/*background-color:#FFFFFF;*/
background-image:linear-gradient(19deg,#24D4FD 0%,#B721FF 100%)
}
</style>
</head>
<body>
<!-- 渐变,哈哈-->
</body>
</html>
效果图:
把body中文字取消注释效果图:
彩蛋
1.css就是前端边改边调试
2.画渐变的网站
渐变网站 github开源项目,本地可以搭建起来
可以直接复制css代码
3.修改百度首页背景色
未修改前:
修改后: