css 背景图怎么设置自动填充满-凯发ag旗舰厅登录网址下载

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

刷新之后发现又出现bug了

我的浮动呢？？？

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

将clearfix移到新的父系标签"inner"中，再将所有css属性中的".topnavbar>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文件夹中，这里我用的是最近超爱的战斗天使）保持与原图大小相同，指定一个宽高

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

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

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

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

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

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

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

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

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

是因为标签默认会包住标签

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

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

令三角形的标签相对于hello的标签进行绝对定位

只需要做两步

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

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

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

完成

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

没错 “浮动”

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

观察到两侧有空白部分，则给