CSS基础操作（三）-控制元素背景：颜⾊赋值、设置背景样式（背景图⽚⼤⼩、位置、重复⽅式、。。。
4.控制元素背景
4.1 颜⾊的赋值
三原⾊：RGB，Red：红 Green：绿 Blue：蓝
任何颜⾊都是由三原⾊组合⽽来，每个颜⾊的取值都是0~255
颜⾊赋值：red / green / blue / a
8位2进制：0000 0000 ~1111 1111
6位16进制赋值：#000000~#ffffff
3位16进制赋值：#000~#fff（0代表00,1代表11，以此类推，这样表⽰的颜⾊种类变少）
3位10进制赋值：rgb(0,0,0)~rgb(255,255,255)
4位10进制赋值：rgba(0,0,0,0-1)~rgba(255,255,255,0-1)，其中a=alpha表⽰透明度，值越⼩越透明，值为1则不透明
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>颜⾊赋值</title>
<style type="text/css">
/* 值越⼤，颜⾊越浅；值越⼩，颜⾊越深 */
div{
font-size:20px;
background-color:#000000;
color:#ffffff;
}
p{
font-size:30px;
background-color:#ff0000;
color:#00ff00;
}
span{
font-size:40px;
background-color:#0000ff;
color:#ff00ff;
}
li{
font-size:25px;
background-color:#def;/* ddeeff */
color:#456;/* 445566 */
}
h1{
background-color:rgb(255,0,0);
color:rgb(0,0,255);
}
h2{
background-color:rgb(255,255,0,0.5);
color:rgb(0,255,255,0.3);
}
</style>
</head>
<body>
<div>这是div⽂本</div>
<p>这是p⽂本</p>
<span>这是span⽂本</span>
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
</ul>
<h1>44444</h1>
<h2>55555</h2>
</body>
</html>
显⽰效果：
4.2 常⽤背景样式
设置块级元素⼤⼩：width、height，单位：像素
设置背景颜⾊：background-color
设置背景图⽚：background-image:url("路径")，不能直接写路径，必须写在url()中
设置背景图⽚宽⾼（⼤⼩）：第⼀个位置对应width，第⼆个位置对象height
像素⼤⼩：background-size:200px 300px
百分⽐⼤⼩：background-size：50% 100%
设置重复⽅式：
不重复：background-repeat:no-repeat；仅在左上⽅显⽰⼀张背景
重复：background-repeat:repeat；默认填充整个块级元素⼤⼩
x⽅向重复：background-repeat:repeat-x；只填充x⽅向，即宽度⽅向
y⽅向重复：background-repeat:repeat-y；只填充y⽅向，即⾼度⽅向
设置背景的位置：
居中：background-position:center;
靠左：background-position:left;
左上⽅（默认）：background-position:top left;
左下⽅：background-position:bottom left;
靠右：background-position:right;
右上⽅：background-position:top right;
右下⽅：background-position:bottom right;
以百分⽐形式表⽰：background-position:50% 80%，两个位置依次相对width、height⽽⾔
以像素⼤⼩表⽰：background-position:200px 100px；两个位置依次相对width、height⽽⾔
设置背景图⽚是否随滚动轴滚动：background-attachment：值
scroll：默认值，背景图像会随着页⾯其余部分的滚动⽽滚动
local：其中scroll和local属性的作⽤相类似，当设置background-position的时候，他们的位置是相对于元素的边框的，因此当我们滚动浏览器的滚动条的时候，它会跟随着元素滚动条的滚动⽽滚动，并和元素⼀起因滚动⽽⽆法在视图中被浏览者看见。但是假如这个元素内部是具有滚动条的也就是设置了overflow：scroll，那么background-attachment设置了scroll的话，背景图⽚不会随着内部滚动条的滚动⽽滚动，但是假如设置了local，那么内容就会随着滚动条的滚动⽽滚动。
使⽤scroll的内部带有滚动条的元素内的背景图⽚不会因为滚动条滚动⽽改变位置：
使⽤local的内部带有滚动条的元素内的背景图⽚则会因为滚动条滚动⽽改变位置
准确来讲，scroll相对于元素固定，⽽local是相对于元素内容固定。也就是说，在存在内部滚动条的情况下，scroll就相当于
fixed，⽽local就相当于scroll。
fixed：当页⾯的其余部分滚动时，背景图像不会移动
fixed与scroll的区别：fixed设置后，与scroll的背景图⽚位置相对于元素不同，fixed的背景图⽚位置是相对于页⾯可视区域的
左上⾓的，元素的⼤⼩是背景图⽚能够显⽰的范围，当滚动过了这个范围，背景图⽚也将⽆法看见。fixed不会随着滚动条的
滚动⽽滚动，它只会固定在页⾯中的某⼀个位置。
inherit：规定应该从⽗元素继承background-attachment属性的设置
⼩窍门：
HTML代码缩进层级很多，如果使⽤Eclipse默认的缩进格式，代码多了可能发⽣缩进过度，导致代码不⽅便查看的情况，我们可以使⽤下⾯的办法让html⽂件的缩进距离变⼩，减少上⾯情况的发⽣：
Window-->Preference-->Web-->HTML Files-->Editor，勾选Indent using spaces把下⾯的1改成2。
修改后：设置编辑器使⽤2个空格进⾏缩进
代码调整前：
代码调整后：缩进间距变⼩
注意：这样⼀次设置之后对所有html⽂件都⽣效，原先使⽤Tab进⾏缩进，现在相当于使⽤两个空格进⾏缩进，以后直接Ctrl+A、Ctrl+I就可调整代码格式。
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style type="text/css">
#img{
/*div是块级元素，可以设置块的⼤⼩ */
width:1200px;
height:600px;
/*设置背景颜⾊*/
background-color:#aaccff;
/*不能直接写路径，必须写在url()中*/
background-image:url("../image/3.jpg");
/*设置背景图⽚⼤⼩（宽⾼）*/
/*background-size:1200px 600px;*/
/*background-size:50% 100%;*/
/*设置重复⽅式*/
background-repeat:no-repeat;
/*background-repeat:repeat;*/
/*background-repeat:repeat-x; */
/*background-repeat:repeat-y; */
/*设置显⽰位置*/
/*background-position:center;*/
/
*background-position:left;*/
/*background-position:top left;*/
/*background-position:bottom left;*/
/*background-position:right;*/
/*background-position:top right;*/
/*background-position:bottom right;*/
/*background-position:200px 100px;*/
background-position:20% 80%;
}
</style>
</head>
<body>
<div id="img">
<!-- ⾥⾯可以写⽂字，也可以放图⽚，但图⽚上不能再加东西
⼩崔，加油！<br>
<img src="dog.png">
-->
css设置表格滚动条</div>
</body>
</html>
测试效果：
（1）指定div块⼤⼩，设置背景颜⾊---div相当于墙，背景颜⾊相当于漆
（2）添加背景图⽚---相当于在墙上贴瓷砖，默认贴满
（3）可以设置背景图⽚⼤⼩（宽⾼）---相当于贴不同⼤⼩的瓷砖
（4）可以设置背景图⽚重复的⽅式--向不同⽅向贴瓷砖，默认全部填满（background-repeat:repeat;）
a.不重复：background-repeat:no-repeat;
b.向x⽅向重复：background-repeat:repeat-x;
c.向y⽅向重复：background-repeat:repeat-y;
（5）可以设置背景图⽚显⽰的位置
a.居中：background-position:center;
b.上⽅居中：background-position:top center;
c.下⽅居中：background-position:bottom center;
d.靠左：background-position:left;
e.左上⽅（默认）：background-position:top left;
f.左下⽅：background-position:bottom left;
g.靠右：background-position:right;
h.右上⽅：background-position:top right;
i.右下⽅：background-position:bottom right;
j.利⽤百分⽐调整
偏左下：background-position:20% 80%；两个位置参数均相对于width、height⽽⾔
偏右上：background-position:80% 20%；两个位置参数均相对于width、height⽽⾔
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论