个⼈主页设计-web前端开发技术（html+css）
基本知识
插⼊背景图⽚
css怎样设置背景图⽚?
css 中background属性就是专门设置背景的属性，可以设置背景⾊，也可以设置背景图⽚。
下⾯看看background可以设置的属性：
background-color： 规定要使⽤的背景颜⾊。
background-position： 规定背景图像的位置。
background-size： 规定背景图⽚的尺⼨。
background-repeat ：规定如何重复背景图像。
background-origin ：规定背景图⽚的定位区域。
tarzan韩国哪里人
background-clip： 规定背景的绘制区域。
background-attachment： 规定背景图像是否固定或者随着页⾯的其余部分滚动。
background-image ：规定要使⽤的背景图像。
1.可以看出background-image属性就是给html页⾯设置背景图⽚的属性，下⾯看看它的⽤法
background-image:url(1.jpg);
这样在url()⾥给出图⽚的路径，就可以给div盒⼦设置⼀个背景图⽚；看似简单，但有⼀点要注意，设置背景图⽚的盒⼦必须要有实质的宽度与⾼度，这样才可以让背景图⽚在显⽰屏上显⽰。
2.上⾯的这些background属性如果⼀个⼀个的设置是不是感到繁琐，其实有些属性是可以放在⼀起设置的，这样的css背景表达可以节约且优化了css⽂件代码。例：
background:url(bgimg.gif) no-repeat 5px 5px;
如下图解释：
css设置背景图⽚的代码实例
1.css设置背景图⽚⾃适应全屏
<html>
<head>
<meta charset="UTF-8">
<title>背景图⽚设置</title>
<style>
.demo{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
min-width:1000px;
z-index:-10;
zoom:1;
background-color: #fff;
background:url(2.png);
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
</style>
</head>;
<body>;
<div class="demo"></div>
</body>
</html>
下⾯具体分析⼀下css样式的作⽤：
position:fixed;
top:0;
left:0;
这三句是让整个div.demo盒⼦固定在屏幕的最上⽅和最左⽅。
学生个人网页html代码width:100%;
height:100%;
这是让整个div跟屏幕实现⼀模⼀样的⼤⼩，从⽽达到全屏效果。
min-width:1000px;ascii码13是什么
min-width是为了实现让屏幕宽度在1000px以内时，div的⼤⼩保持不变，也就是说在这种情况下，缩放屏幕宽度时，图⽚不要缩放（只有在1000px以内才有效）。
z-index:-10;
这个是让整个div在HTML页⾯中处在各个层级的下⽅，正常情况下，第⼀个创建的层级z-index的值是0，所以如果我们这⾥写成-1也可以实现，不过这⾥写-10是确保整个div在最下⾯，因为如果页⾯中层级太多了，有的时候⽤-1不⼀定在最下⾯，但如果写成-100这样⼤数字的也没有什么意义。⽤index:-10 以此能达到看上去像背景图⽚，其实是⼀个最普通的div，只是层级关系变了，才让⼈看上去看是背景图⽚。
background-repeat: no-repeat;
这个css样式是设置背景图⽚不要重复的；例⼦中的是⼀张⼤图，如果是⼀张纯⾊（或伴有点状/条纹
状）的图⽚，可以让图⽚平铺（重复）到整个屏幕上，达到全屏效果。（repeat-x是设置横向平铺、repeat-y是设置竖向平铺）
2.css设置背景图⽚透明
<html>
<head>
springboot个人博客项目<meta charset="UTF-8">
<title>背景图⽚设置</title>
<style>
.demo{
width:600px;
height:200px;
background:url(1.jpg) no-repeat;
}
.demo1{
width:100%;
height:100%;
background-color:rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<div class="demo">
<div class="demo1"></div>
</div>
<body>
</html>
设置图⽚，图标，⽂字元素位置
说明
这个属性定义建⽴元素布局所⽤的定位机制。任何元素都可以定位，不过绝对或固定元素会⽣成⼀个块级框，⽽不论该元素本⾝是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
有四个属性值：
absolute：⽣成绝对定位的元素，相对于 static 定位以外的第⼀个⽗元素进⾏定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进⾏规定。
fixed：⽣成绝对定位的元素，相对于浏览器窗⼝进⾏定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进⾏规定。
relative：⽣成相对定位的元素，相对于其正常位置进⾏定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
⽰例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
img {
position: absolute;
left:100px;
top:100px
}
</style>
</head>
<body>
<img src="2.jpg"/>
<p>
通过绝对定位，元素可以放置到页⾯上的任何位置。下⾯的标题距离页⾯左侧100px，距离页⾯顶部150px。
</p>
</body>
</html>
2、使⽤background-position属性设置背景图⽚的位置
在背景图⽚的背景图⽚位置属性中，background-position是⽤来控制元素背景图⽚的位置。它接受三种值：
关键词，如top、right、bottom、left、center
长度值，如px、em、rem等
百分值：%
background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这⼀点开始。⽰例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{width:200px;height:200px;
border:1px solid #ccc;
background:url('/i/eg_bg_03.gif') no-repeat left bottom;}
</style>
</head>
项目管理软件源码<body>
<div></div>
</body>
</html>
css设置图⽚形状
使⽤⽅法
1.裁剪三⾓形
元素的左上⾓为（0 0）；polygon裁剪多边形。
英格兰0比0荷兰
.clipClass{
-webkit-clip-path:polygon(0100%,50%0,100%100%);
}
2.裁剪圆形
创建圆形，需要给circle传⼊三个值：半径和圆⼼坐标（x y），⽤at关键字来定义圆⼼坐标。.clipClass{
-webkit-clip-path:circle(50% at 50%50%);
}
3.裁剪椭圆
创建椭圆，需要给ellipse传⼊四个值：椭圆的x轴半径、y轴半径以及椭圆圆⼼(x y)。
.clipClass{
-webkit-clip-path:ellipse(30%20% at 50%50%);
}
4.裁剪插图
使⽤inset传⼊四个值，对应“上 右 下 左”的顺序来设置圆⾓半径。
.clipClass{
-webkit-clip-path:inset(25%025%0 round 025%025%);
}
上⾯的各个值分别对应为：
inset(<top><right><bottom><left> round <top-radius><right-radius><bottom-radius><left-radius>)
其简写形式：
.clipClass {
-webkit-clip-path:inset(25%0 round 025%);
}
5.动画切换

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。