CSS 背景属性

cssweb developmentfront end technology更新于 2025/1/5 2:52:17

CSS 背景属性帮助我们设置元素的背景样式。CSS 背景属性是指定元素背景的简写。background-color、background-image、background-repeat、background-position、background-clip、background-size、background-origin 和 background-attachment 共同构成了 CSS 背景属性。

语法

CSS 背景属性的语法如下 −

Selector {
   background: /*value*/
}

示例

以下示例说明了 CSS 背景属性 −

<!DOCTYPE html>
<html>
<head>
<style>
#main {
   margin: auto;
   width: 300px;
   background-image: url("https://www.cainiaomax.com/hadoop/images/hadoop-mini-logo.jpg");
   background-repeat: no-repeat;
   background-size: cover;
}
#im {
   height: 200px;
   width: 200px;
   background-image: url("https://www.cainiaomax.com/images/css.png");
   background-repeat: no-repeat;
   background-position: center;
}
</style>
</head>
<body>
<div id="main">
<div id="im"></div>
</div>
</body>
</html>

输出

这将给出以下输出 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: url("https://www.cainiaomax.com/hcatalog/images/hcatalog-mini-   logo.jpg"),url("https://www.cainiaomax.com/hbase/images/hbase-mini-logo.jpg"),url("https://www.cainiaomax.com/hadoop/images/hadoop-mini-logo.jpg");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: 10% 10%, 40% 40%, 90% 10%;
}
</style>
</head>
<body>
</body>
</html>