1: 设置背景颜色 backgound背景 color颜色
2: background-color: 颜色的英语单词/rgba(红色数字 ,绿色数字,蓝色数字,透明色)/#f0f # ; 红色数字/绿色数字/蓝色数字:0-255;透明色0-1
3: background-image: 背景图片 url(图片地址)
4; background-repeat:重复显示, no-repeat;(不重复显示)/repeat/repeat-x/repeat
5: fixed背景固定 - scorll背景滚动(默认值)
6：background-position: 方位词(top/bottom/left/riht/center),100% 50% 100px 200px
7： background-size: 图片大小 数值大小、百分比
8： background: 复合写法
background: url ('img/nk250.jpg') no-repeat fixed center center/50%/50%;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>背景</title>
<style>
.box{
width: 2217px;
height: 1329px;
border: solid 1px black;
margin: auto;
color: #fff;
font-size: 50px;
/*超出部分滚动显示*/
overflow: scroll;
/*设置背景颜色 backgound背景 color颜色*/
/*background-color: 颜色的英语单词/rgba(红色数字 ,绿色数字,蓝色数字,透明色)/#f0f # ; 红色数字/绿色数字/蓝色数字:0-255;透明色0-1*/
background-color: #FF0000; /* rgds(255,0,0,.5)*/ /*red*/
/*background-image: 背景图片 url(图片地址)*/
background-image: url('img/nk250.jpg');
/*background-repeat:重复显示, no-repeat;(不重复显示)/repeat/repeat-x/repeat/*/
background-repeat: no-repeat;
/*fixed背景固定 - scorll背景滚动(默认值)*/
background-attachment: fixed:
/*background-position: 方位词(top/bottom/left/riht/center),100% 50% 100px 200px*/;
background-position: center center;
/*background-size: 图片大小 数值大小、百分比*/
background-size:
/*background: 复合写法*/;
background: url ('img/nk250.jpg') no-repeat fixed center center/50%/50%;
}
</style>
</head>
<body>
<div class="box">
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
<p>豆芽</p>
</div>
</body>
</html>
html+css笔记--2021-3-29
最新推荐文章于 2023-04-10 17:25:53 发布
2117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
