CSS 背景
CSS 背景属性用于定义元素的背景效果。设计背景有很多属性。 CSS 背景属性如下:
- CSS 背景色属性:CSS 中的背景色属性用于指定元素的背景色。
- CSS 背景图像属性:背景图像属性用于为一个元素设置一个或多个背景图像。
- CSS 背景-重复属性:CSS 中的背景-重复属性用于水平和垂直重复背景图像。
- CSS 背景-附件属性:CSS 中的属性背景-附件属性用于指定背景图像相对于其容器的附件种类。
- CSS 背景-位置属性:在 CSS 中，主体-位置属性主要用于设置某个位置的图像。
- CSS 背景原点属性:背景原点是 CSS 中定义的一个属性，有助于调整网页的背景图像。
- CSS 背景-剪辑属性:CSS 中的背景-剪辑属性用于定义如何在元素内扩展背景(颜色或图像)。
背景色属性 :此属性指定元素的背景色。颜色名称也可以给出为:“绿色”，十六进制值为“#5570f0”，RGB 值为“rgb(25，255，2)”。 语法:****
body {
background-color:color name
}
示例:
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: blue;
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
</body>
</html>
输出:
背景图像属性 : 该属性指定用作元素背景的图像。默认情况下，图像是重复的，因此它覆盖了整个元素。 语法:
body {
background-image : link;
}
示例:
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
</body>
</html>
输出:
背景重复属性 :默认情况下，背景图像属性水平和垂直重复图像。 语法:水平重复图像
body {
background-image:link;
background-repeat: repeat:x;
}
示例:
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>"Hello world"</h1>
</body>
</html>
输出:
背景-附着属性 :该属性用于固定背景地面图像。图像不会随着页面滚动。 语法:****
body {
background-attachment: fixed;
}
示例:
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
</body>
</html>
输出:
背景位置属性 : 该属性用于将图像设置到特定位置。 语法:
body {
background-repeat:no repeat;
background-position:left top;
}
示例:
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
</body>
</html>
输出:
版权属于：月萌API www.moonapi.com，转载请注明出处
