问：文字的颜色为什么会被底色影响？
简单来说，相当于一层 mask，或者说纱布、罩子，盖住了那些内容...
这个涉及到 z-index，即元素所在层次的问题，抽点时间去了解，动手写一写
问：:before没内容没有竖线？
这个太太太太基础了，用 :before、:after 这俩伪元素时，content: ''; 不能漏掉
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#x {
position: relative;
top: -275px;
left: 500px;
width: 448px;
height: 275px;
background: url('./mao.jpg');
background-size: 448px 275px;
}
#w {
position: relative;
top: 215px;
width: 100%;
height: 60px;
z-index: 99;
}
#w:after {
display: inline-block;
content: '';
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.2;
/* background: rgba(0, 0, 0, 0.2); */
z-index: -1;
}
#w:before {
display: inline-block;
content: '';
margin-left: 40px;
margin-top: 6px;
width: 4px;
height: 48px;
background: #13ff25;
}
#w h2 {
display: inline-block;
font: 26px '微软雅黑';
color: #fff;
height: 60px;
line-height: 60px;
}
#w span {
display: inline-block;
font: 12px '微软雅黑';
font-style: italic;
color: #72b16a;
line-height: 60px;
}
前端技术
这些算是测试内容
======== 分割线 ========
前面 inline-block 的用法都有问题
关于 inline-block 我自己原本也存疑好久了，今天总算有时间静下来看了看
不过，关于 BFC，呃... 内联行内、块级元素的区别，这边就不多解释了
最后只说，布局什么的，实现方式实在太多了，举个例子：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#x {
position: relative;
top: -275px;
left: 500px;
width: 448px;
height: 275px;
background: url('mao.jpg');
background-size: 448px 275px;
}
#w {
position: relative;
top: 215px;
width: 100%;
height: 60px;
z-index: 99;
}
#w:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
line-height: 60px;
background: #000;
opacity: 0.2;
/* background: rgba(0, 0, 0, 0.2); */
z-index: -1;
}
#w:before {
position: absolute;
content: '';
margin-left: 40px;
margin-top: 6px;
width: 4px;
height: 48px;
background: #13ff25;
}
#w p {
padding-left: 60px;
font: 26px '微软雅黑';
color: #fff;
height: 60px;
line-height: 60px;
}
#w span {
font: 12px '微软雅黑';
font-style: italic;
color: #72b16a;
line-height: 60px;
}
前端技术这些算是测试内容
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
