HTML——day13
css背景
背景颜色：background—color
背景图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
/* transparent;/*表示透明的清澈的背景*/
/* pink;*/
background-image: url(images/views.jpg);/*图片路径非常重要，*/
background-repeat: repeat-x/*背景图片的属性，是怎样平铺的沿着x或者y或者不平铺这些都是对于我们的图片比我们的框框小的情况下*/;
/* background-position:x y ;
垂直居中
*/
background-position:right top;/*方位名词,顺序无所谓*/
/*如果我们只写一个方位名词name另一个就是默认center*/
/* background-position: x y;/*这里的位置必须是先x后y*/
/*精确位置可以和方位进行混合带你前提是前面一定是x方位后面一定是y的方位*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
----------------------------------------------------------------------------
下面是我们做的一个案例很简单的插入图片
-------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-image: url(images/ganjiang.jpg);
/* background-position: center top;/*水平居中 垂直居中*/
background-position: center 50px;
background-repeat: no-repeat;
}
h4 {
background-color: pink;
background-image: url(images/ly.png);
background-repeat: no-repeat;
background-position: left ;
width: 100px;
text-indent: 2em;
font-weight: 400;
}
</style>
</head>
<body>
<h4>成长守护</h4>
</body>
</html>
--------------------------------------------------------------------
