2.CSS背景

最新推荐文章于 2024-07-13 11:50:40 发布

黑糖22

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量44

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_43966202/article/details/128696169

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.CSS背景

1.CSS 背景属性用于定义 HTML 元素的背景。
2.CSS 属性定义背景效果：
①background-color。定义了元素的背景颜色。
i：页面的背景颜色使用在body的选择器中:

<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
body
{
	background-color:#b0c4de;
}
</style>
</head>

ii：CSS中，颜色值通常以以下方式定义:十六进制、RGB、颜色名称。
②background-image。元素的背景图像。
i：默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
body 
{
	background-image:url('https://static.runoob.com/images/mix/paper.gif');
	background-color:#cccccc;
}
</style>
</head>

③background-repeat。决定background-image 属性会在页面的水平或者垂直方向平铺。
i：水平平铺：

<style>
body
{
	background-image:url('https://static.runoob.com/images/mix/gradient2.png');
	background-repeat:repeat-x;
}
</style>

ii：不平铺：

<style>
body
{
	background-image:url('img_tree.png');
	background-repeat:no-repeat;
}
</style>

④background-attachment。背景图像是否固定或者随着页面的其余部分滚动。
i：默认值为scroll：随页面滚动。fixed：不会随着页面的滚动而滚动。

<style>
body 
{
background-image:url('https://static.runoob.com/images/mix/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>

⑤background-position。图像定位。

<style>
body
{
	background-image:url('https://static.runoob.com/images/mix/img_tree.png');
	background-repeat:no-repeat;
	background-position:right top;
	margin-right:200px;
}
</style>