网站建站遇到的问题小总结
设计稿给的是这样的背景设计(这是主体部分的背景图,头部和尾部分别只有一条斜线)
当时的实现步骤是这样的:
1.从设计稿上直接切下这样的背景图,宽度默认是100%,但是图片并没有撑满整个屏幕,图片也必须设置为不重复
2.于是查阅了background的各种属性,使用background-size : cover; 这一属性可以使图片撑开,但是斜线出不来
3.于是设置css样式为
header{
background: url(../img/header-bg.jpg) bottom no-repeat;
width: 100%;
height: 692px;
background-size: cover;
}
4.此时,头部的下斜线的效果实现了,但是主体部分如图所示的双斜线效果按照相同方法实现不了,background的position属性全部试过,依旧没有效果
ps: 有考虑用css3样式写一个这样的背景图,需要渐变,斜切功能,但还是想解决这个问题 ,目前还是没有找到方法