我是 HTML/CSS 的新手,我在暑假期间开始了一个元素以学习更多网络编程。该网站主要包含我使用/也需要快速访问的信息。所以考虑包括指向所有学校、工作等相关内容的链接。
我才刚刚开始,如果这对你们来说是微不足道的,我很抱歉!我试图为我遇到的问题找到解决方案,但没有真正找到解决方案。
我想到的 header 具有以下结构: Example
我已经修复了导航栏,但标题部分仍然存在问题。 这是我现在拥有的代码:https://jsfiddle.net/pefypr7v/2/
html,body {
margin: 0;
}
html {
background: #FFF;
font-family: Helvetica,Arial,sans-serif;
}
header {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
text-transform: uppercase;
}
header > *:not(.background-img) {
z-index: 5;
position: relative;
}
.background-img > h2 {
margin-top:0;
margin-bottom: 0;
background-color: grey;
}
.background-img {
background-image: url('http://i.imgur.com/N6l22Aq.jpg');
background-size: cover;
background-position: bottom center;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
}
<header>
<div class="background-img">
<h2> Random title</h2>
</div>
</header>
我遇到的问题:
- 灰色文本背景仅覆盖文本并且有点透明(有什么方法可以使用颜色代码 [即 FFFFFF] 和透明度而不是 rgba(x,x,x,x) 选择颜色?)
- 标题居中垂直对齐
最佳答案
我使用了 Lokesh Gupta 的答案,因为它只是缺少垂直对齐。您可以通过以下方式实现:
.background-img > h2 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
html,
body {
margin: 0;
}
html {
background: #FFF;
font-family: Helvetica, Arial, sans-serif;
}
header {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
text-transform: uppercase;
}
header>*:not(.background-img) {
z-index: 5;
position: relative;
}
.background-img {
text-align: center;
}
.background-img > h2 {
margin-top: 0;
margin-bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: inline-block;
padding: 5px 10px;
color: #fff;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.background-img {
background-image: url('http://i.imgur.com/N6l22Aq.jpg');
background-size: cover;
background-position: bottom center;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
}
<header>
<div class="background-img">
<h2> Random title</h2>
</div>
</header>
关于html - 在标题中的图像上构建文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44455635/