专注Java教育14年
全国咨询/投诉热线：444-1124-454
更新时间：2022-02-17 10:36:45 来源：极悦 浏览763次
为 <body>元素设置背景图像：
body {
background-image: url("paper.gif");
background-color: #cccccc;
}
为 <body>元素设置两个背景图片：
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-color: #cccccc;
}
该background-image属性为元素设置一个或多个背景图像。
默认情况下，背景图像放置在元素的左上角，并在垂直和水平方向重复。
提示：元素的背景是元素的总大小，包括内边距和边框(但不包括边距)。
提示：如果图像不可用，请始终设置要使用的背景颜色。
background-image: url|none|initial|inherit;
为 <body>元素设置两个背景图像。让第一个图像只出现一次(不重复)，让第二个图像重复：
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-repeat: no-repeat, repeat;
background-color: #cccccc;
}
使用不同的背景属性来创建“英雄”图像：
.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
将线性渐变(两种颜色)设置为<div>元素的背景图像：
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow);
}
将线性渐变(三种颜色)设置为<div>元素的背景图像：
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow, green);
}
repeating-linear-gradient() 函数用于重复线性渐变：
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
将径向渐变(两种颜色)设置为<div>元素的背景图像：
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: radial-gradient(red, yellow);
}
将径向渐变(三种颜色)设置为<div>元素的背景图像：
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: radial-gradient(red, yellow, green);
}
repeating-radial-gradient() 函数用于重复径向渐变：
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: repeating-radial-gradient(red, yellow 10%, green 20%);
}
Java实验班
0基础 0学费 15天面授
Java就业班
有基础 直达就业
Java夜校直播班
业余时间 高薪转行
Java在职加薪班
工作1~3年，加薪神器
Java架构师班
工作3~5年，晋升架构
提交申请后，顾问老师会电话与您沟通安排学习
