怎么注册建设公司网站,天津建站平台,全屏网站模版,设计产品上节课的时候我们完成的页面是这个样子#xff01;
● 之后我们通过绝对定位来解决位置定位的问题 .header-container {width: 1200px;margin: 0 auto;position: absolute;left: 50%;top: 50%;
}header {height: 100vh;background-color: orange;position: relative;
}● 之…上节课的时候我们完成的页面是这个样子
● 之后我们通过绝对定位来解决位置定位的问题 .header-container {width: 1200px;margin: 0 auto;position: absolute;left: 50%;top: 50%;
}header {height: 100vh;background-color: orange;position: relative;
}● 之后我们通过自身的高度向左边上面移动 .header-container {width: 1200px;margin: 0 auto;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}● 看如下图我们标题的位置结束的位置是整个页面的一半
我们把这些问题重新加一个class来操控 .header-container-inner {width: 50%;}● 之后我们去除背景色添加图片背景 header {height: 100vh;position: relative;background-image: url(hero.jpg);
}● 出现上面的情况是因为图标太大了我们要使得图片缩放为整个背景区我们可以使用这个参数 header {height: 100vh;position: relative;background-image: url(hero.jpg);background-size: cover;}● 现在图标看起来正常了我们将字体改为白色 header {height: 100vh;position: relative;background-image: url(hero.jpg);background-size: cover;color: #fff;}● 看上图由于图片太过于明亮了影响我们阅读文本我们需要把图片变暗来让文字更加利于我们阅读我们采用线性渐变的方法
background-image: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ), url(hero.jpg);
linear-gradient():这是CSS中的渐变函数,用于定义一个线性渐变。这里定义了从上至下的渐变,起点颜色是rgba(0, 0, 0, 0.6),含0.6透明度的黑色,终点颜色也是同样的rgba(0, 0, 0, 0.6)。url(hero.jpg):这是背景图片的URL,引用了hero.jpg这张图片。 将这两部分组合在一起,最终的背景就是: 下方是hero.jpg图片,上方覆盖一层线性渐变的半透明黑色遮罩。遮罩的颜色由上至下线性变化,但是起点终点颜色都是同样的半透明黑色。 这种效果可以起到改变背景图片色调的作用。比如原图片比较亮,加一个半透明的浅黑色遮罩可以让整个背景变得昏暗和朦胧。
这样看起来就非常好
● 接下来这个导航的位置我们需要添加要给上面空白 nav {font-size: 20px;font-weight: 700;display: flex;justify-content: space-between;padding-top: 32px; #这里不能使用marginmargin不生效}这样我们就大致实现了一个这样的效果
