前言
CSS的图片背景样式还有哪些值得一看的地方呢,一起看看叭~
首先回顾一下图片作为背景样式的一些属性:
background-image | 为元素设置背景图像 |
background-repeat | 背景图像是否平铺 |
background-size | 属性规定背景图片的尺寸 |
background-origin | 规定背景图片的定位区域 |
background-position | 指定背景图像的位置 |
background-attachment | 背景图像是应该滚动还是固定 |
background-size | 背景颜色 |
话不多说直接上代码:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div{
background-image:url('./dogge.png') ;
background-repeat:no-repeat;/*图片不重复*/
background-position:left bottom;/*指定图片位置*/
background-attachment: fixed;/*指定背景图像是滚动的*/
height: 1800px;
width: 900px;
border: 4px solid red;/*指定边框颜色*/
}
h1,p{
font-size: 60px;
color: #87CEEB;
}
</style>
</head>
<body>
<div id="div">
<h1>Hello Word</h1>
<p>是谁在偷偷学习呀?注意劳逸结合,保持最佳状态!</p>
</div>
</body>
</html>