CSS 元素背景样式

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

我们可以使用 background 属性指定元素的背景属性。它可以采用以下值:background-color、background-image、background-repeat、background-position、background-clip、background-size、background-origin 和 background-attachment。

语法

CSS 背景属性的语法如下 −

Selector {
   background: /*value*/
}

示例

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background: gray url("https://www.cainiaomax.com/pytorch/images/pytorch.jpg") no-repeat;
   font-size: 1.2em;
   color: black;
}
h2 {
   -webkit-text-fill-color: transparent;
   -webkit-text-stroke: 1px black;
}
p {
   box-shadow: 0 0 5px 5px black;
}
</style>
</head>
<body>
<h2><i>PYTORCH Tutorial</i></h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</body>
</html>

输出

这将给出以下输出 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
   background-color: bisque;
}
div {
   margin: auto;
   background-color:orange;
   width: 40%;
}
</style>
</head>
<body>
<h2>Demo Text</h2>
<div>demo demo demo demo</div>
</body>
</html>