CSS基础2-CSDN博客

本文链接：https://blog.csdn.net/frost08ds/article/details/39939163

CSS基础2

CSS样式结构—— 选择器{ 声明块}

- - - 声明块为：属性：属性值；
  - - 选择器分组：用逗号隔开，如a，p，#div_1 { 作用域 }

CSS文档树—— 即结构化（父级、同级、子级）

元素内容的字体颜色与背景——

1、color 定义字体的颜色

2、background-color 定义背景色，初始值为透明

3、background-image url( ) 背景图像

4、background-repeat 背景图像如何铺排

它的取值有：repeat | no-repeat | repeat-x | repeat-y

5、background-attachment 背景图片随内容滚动还是固定

它的取值有：scroll | fixed

6、background-position 指定背景图片显示位置

它的取值有：[ < 百分比> | < length>] { 1, 2} | [ top | center | bottom ] | [ left | center | right ]

例如：100px（水平移动，有正负之分）100px （垂直移动）（最终显示移动后的图片）

center （图片的中间显示）

center left （显示图片中间位置的左图片）

下面这个例子就是应用背景图片的position

原图片为：

<!DOCTYPE html>
<html>
<head>
	<title>背景</title>
	<meta charset="utf-8">
	<style type="text/css">
	.Bj_div{
		width: 300px;
		height: 300px;
		background-image: url(3.jpg);
		/*background-position:0px 0px; */
		/*第一个是水平的移动位置 正  负；第二个是垂直距离*/
		background-position:-100px -100px; 
		/*background-position:center;*/
	   /* background-position: center left;*/
		/*background-position:50% 50%;*/
	}
	</style>
</head>
<body>
	<div class="Bj_div"></div>
	<a href="">蓝翔</a>
</body>
</html>

其运行后的结果为：