CSS学习笔记--背景

最新推荐文章于 2024-10-17 18:29:30 发布

PRCORANGE

最新推荐文章于 2024-10-17 18:29:30 发布

阅读量127

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/PRCORANGE/article/details/107642869

版权

背景颜色

background-color 属性定义了元素的背景颜色。页面的背景颜色使用在body的选择器中:

<!DOCTYPE html>
<html>
<mate  charset="utf-8"> 
<title>PRCORANGE</title>
<head>
<style>
h1
{
	background-color:#6495ed;
}
p
{
	background-color:#e0ffff;
}
div
{
	background-color:#b0c4de;
}
</style>
</head>

<body>

<h1>CSS background-color 实例!</h1>
<div>
改文本插入在 div 元素中。
<p>该段落有自己的背景颜色。</p>
我们仍然在同一个 div 中。
</div>

</body>
</html>

在这里插入图片描述

背景图像

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>PRCORANGE</title> 
<style>
body 
{
	background-image:url('https://i.loli.net/2020/07/21/qVYWtOnvDJd96Km.jpg');
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

在这里插入图片描述

如果图像只在水平方向平铺 (repeat-x)

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

如果你不想让图像平铺

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

以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。可以利用 background-position 属性改变图像在背景中的位置:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

关键字

图像放置关键字最容易理解的作用就像其名字的意义。例如，top left 使图像放置在元素内边距区的左上角。只要保证不超过两个关键字：一个对应水平方向，另一个对应垂直方向，那么你可以设置位置关键字以任何顺序出现。如果只有一个关键字，则会默认另一个关键字为 center。所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：

p        
 {        
  background-image:url('img_tree.png');        
  background-repeat:no-repeat;            
 background-position:top;            
 }

百分数值

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，你可以按照下面的代码进行设置：

body        
  {        
   background-image:url('img_tree.png');        
   background-repeat:no-repeat;        
  background-position:50% 50%;         
  }

长度值

长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

body       
  {       
   background-image:url('img_tree.png');        
   background-repeat:no-repeat;        
  background-position:50px 100px;        
  }