css 背景图怎么设置自动填充满_CSS-布局与定位

首先回顾一下上一篇中的最后效果展示

现在我们继续往后做

首先看一下最终效果图

先来做一个背景图吧

第一步：

下载原图（或者可以自己设置想要的背景图）

在resume文件夹中创建一个新的文件夹img，专门用来存放需要用到的图片，将背景图先放进去。（这里我是用了一个自己喜欢的壁纸 命名为tree.jpg）

先使用CSS样式表来尝试一下

<div class="banner" style="background-image: url(./img/tree.jpg)"></div>

运行之后发现页面没有任何变化

为什么呢？

这里用到一个调试大法

给标签加一个边框

<div class="banner" style="background-image: url(./img/tree.jpg);border: 1px solid red;">

运行后可以看到导航栏下面多了一条红色边框线

这就证明这个图像的高度为0，于是试着给它加一个高度

.banner{height: 100px;}

可以看到图片出来了一部分了

这里就涉及到了一个CSS中的重点

• 块级元素 div 高度由其内部文档流元素的高度总和决定
• 文档流：文档内元素的流动方向
• 内联元素从左往右流动，如果流动遇到阻碍，则换行继续流动（<span>）
• 块级元素每一个块都占一行，从上往下流动（<div>）
• 如果一个中文<span>有border在流动过程中被截断，border不会出现两个，依旧是一个
• 如果一个英文<span>有border在流动过程中遇阻，却不会截断（可以用一个CSS属性改变 word-break：break-all【全部打断】break-word【只有在单词分隔的地方可以打断-默认值】）
• 如果想让块级元素也可以从左往右流动，那就使用“浮动”

既然讲了块级元素，那么内联元素呢，这个非常非常复杂，如果感兴趣，可以点以下的链接去了解一下

方应杭：深入理解 CSS：字体度量、line-height 和 vertical-align​zhuanlan.zhihu.com

接下来继续背景图制作

现在定义的图片高度只有100px，肯定是显示不全的，我们已经知道了 div 的高度是由其文档流的高度总和决定，但导航栏后面都是空白，其高度不足以放下整个背景图，怎么办呢，只能迫不得已给其指定一个特定高度（迫不得已使用，最好不要使用，否则必定会出现bug）

发现还是与原网站有所不同，那怎么样让导航栏和背景图重叠呢，先来介绍一个最简单的方法，让导航栏脱离文档流，让其固定在页面上，相对于窗口定位

.topNavBar{position: fixed;
          top: 0;
          left: 0;}

运行刷新

导航栏与背景图成功重叠，但是为什么导航栏的logo和内容缩在了一起？

我们可以这样解决

.topNavBar{ width: 100%;}

运行刷新

好，分隔开了，但是又出现bug了，导航栏右侧的内容已经贴边了，很影响美观

怎么解决呢

在整个导航栏外面再加一个div专门用来做一个边距

<div class="topNavBar-inner">

先将导航栏的左右外边距删掉，并赋予给"inner"

刷新之后发现又出现bug了

我的浮动呢？？？

由于新添加了一个div，原来的浮动已经失效了，需要重新整理标签

将clearfix移到新的父系标签"inner"中，再将所有CSS属性中的".topNavBar>div"指向符号删掉即可，重新刷新

可喜可贺，恢复了正常

接下来继续

观察原图可以看出，它是一个黑色半透明的样式

所以需要以下几步

①<div class="banner"> <div class="mask"></div> </div> 
②.banner .mask{
    height: 515px;
    background-color: rgba(0, 0, 0, 0.5);}（意为半透明遮挡）

可以看出明显的半透明黑色遮挡

这个时候还是不一样，因为原图中的图片是居中显示，现在明显没有把图片展示完整，于是

.banner{ background-position: center center;}

接下来再给图片加一个自适应大小

.banner{ background-size: cover;}

意思就是会展示所有的图片并按照网页比例缩放

OK，导航栏这一大部分就算是完成了，接下来做这一部分

第二步：

但目前我的页面是这样的

先给其加一个边框（所谓的调试大法）

.userCard{ border: 1px solid red;}

经测量，原网站中的卡片宽度为940px，于是这里设置一个宽度值

.userCard{ max-width: 940px;}

有人会问了，为什么不直接设置width呢？

也就是max-width和width有什么区别呢？

当网页的宽度拖动到小于940px时，max-width会自适应宽度，而width只能向右滑动才可以看全页面，而当网页宽度大于940px时，两者表现相同

然后给其设置一个水平居中

.userCard{ margin-left: auto;
           margin-right: auto;}

于是整个卡片在页面水平居中

接着将头像链接过来（同样存放在img文件夹中，这里我用的是最近超爱的战斗天使）保持与原图大小相同，指定一个宽高

<img src="./img/alita.jpg" width=296px height=343px alt="头像">

于是就引用成功啦，接下来完成Hello部分

首先取色，测量卡片框的宽高，这时候需要注意的一点是，由于是<span>标签，设一个宽高的固定值并不可取，于是先将其转变为块级元素，在设置其内边距

.userCard .welcome{
    color: white;
    background-color: #E8676B;
    display: inline-block;
    padding: 4px 14.5px;
    line-height: 21px; /* 在不同浏览器里表现不同，尽量写一下 */
}

这时候发现原图卡片左下角还有一个小三角形，可以参考以下链接

无情老油条：CSS-画一个三角形​zhuanlan.zhihu.com

做好三角形之后，先再写一个标签放进Hello里

<span class="triangle"></span>

然后将小三角形的CSS属性添加

.userCard .welcome .triangle{
    display: block;
    border: 8px solid transparent;
    width: 0;
    border-left-color: #E6686A;
    border-top-width: 0;
}

运行后发现，怎么和说好的不一样呢，不仅没有看到小三角，卡片仿佛还变大了一点

是因为<span>标签默认会包住<span>标签

现在需要让小三角形脱离文档流

那么这里就要用的另一个定位方式：绝对定位

令三角形的<span>标签相对于Hello的<span>标签进行绝对定位

只需要做两步

①子元素上写position: absolute;
②父元素上写position: relative;

然后调整一下三角形的位置

top: 100%;/* 即三角形的上边缘距卡片的上边缘高度100% */
left: 5px;/* 向右挪动5px */

完成

然后继续调整，如何将头像和内容横向排列呢

没错 “浮动”

①子元素 float: left;
②父元素 class=" clearfix"
③伪元素.clearfix::after {
    content: '';
    display: block;
    clear: both;}

观察到两侧有空白部分，则给<div>标签加一个外边距

.userCard .pictureAndtext{
    padding: 50px;}

再给中间加一个边距

margin-left: 65px;

发现那条分隔线好像不够长

没有办法只能指定一个宽度

width: 471px;

由于每一个标签都有其默认样式，此时写入

*{
    margin: 0;padding: 0;}

将所有样式的默认内外边距删掉，对照着原网站慢慢调整

调整字体间的间距

改变<hr>的样式

hr{
    height: 0;
    border: none;
    border-top: 1px solid #DEDEDE;}

增加<hr>边距

.userCard .text hr{
    margin: 22px 0;}

现在来做下面的效果

怎么分两行显示呢

试着用一下“浮动”

结果发现它们都同行显示，所以利用它们可以自动换行的特性来做一下调整

.userCard dl dt,
.userCard dl dd {
    float: left;
    padding: 8px 0;
}

.userCard dl dt {
    width: 30%;
    font-weight: bold;
}

.userCard dl dd {
    width: 70%;
    color: #9DA0A7;
}

OK 卡片的上半部分算是完成了

再来看下半部分

首先要掌握怎样去引用图标

推荐下面这个链接

无情老油条：阿里巴巴矢量图标库的使用​zhuanlan.zhihu.com

按照步骤做完后 即引用成功

现在继续调整样式

.userCard svg{
    width: 30px;
    height: 30px;
    fill: white;/* JS中的颜色设置方式 */
    vertical-align: top; /* 设置垂直对齐方式 */
}

对图标的样式做一个调整

.userCard>footer.media{
background-color: #E8676B;
text-align: center;
}	

对内容进行一个居中设置

原网站中鼠标悬停时有一个深色的圆浮现

来试着做一下这个效果

先给<a>标签设一个边框

.userCard>footer.media>a{
border: 1px white solid;}

发现边框并没有包住图标，于是添加

display: inline-block;

做一点空隙出来

width: 50px;
line-height: 20px;
padding: 15px 0;/* 直接设置高度非常容易出bug */
margin: 10px 20px;

ok 最后调整为圆形

border-radius: 50%;

去原网站上取色

F12 找到&lt;a&gt;标签 点击右边的:hov 勾选:hover 强制进行鼠标悬停 然后取色

.userCard>footer.media>a:hover {
    background: #D05C60;
}

完成

效果如图

结合上一节的

最终整体效果

就很棒~