CSS图片背景属性

2022-02-17 10:36:45
688次星辉

例子

为 <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属性为元素设置一个或多个背景图像。

默认情况下，背景图像放置在元素的左上角，并在垂直和水平方向重复。

提示：元素的背景是元素的总大小，包括内边距和边框(但不包括边距)。

提示：如果图像不可用，请始终设置要使用的背景颜色。

CSS 语法

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%);
}

上一篇：CSS滚动文本效果下一篇：CSS对齐的示例

选你想看

首页

报班选班

免费测评

视频中心

技术文档

Java资讯

常见问题

hot资讯

学院新闻

热门专题

你适合学Java吗？4大专业测评方法

代码逻辑吸收能力技术学习能力综合素质

先测评确定适合在学习

在线申请免费测试名额
价值1998元实验班免费学

在线咨询

免费试学