我有一个banner div元素,其中的图片与之重叠。我想让文字不被图像覆盖,但是出现问题。
问题示例:
这是我的html的样子:
jr $ra
.header-banner-container {
background: #221E1F;
position: relative;
width: 100%;
height: 11vh;
top: 38px;
z-index: -1;
}
.header-logo {
position: absolute;
padding-left: 3px;
height: 89px;
width: 92px;
}
.banner-text {
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: white;
position: relative;
top: 50%;
transform: translateY(-50%);
}
我的问题是:
作为最佳实践,图像应位于容器流体div中吗?还是像现在这样将它放在横幅之外,对吗?
如何使文本不与图像重叠?
感谢您对问题的任何建议,以及您可能有的其他建议!
答案 0 :(得分:1)
如果图像是徽标或标题中的某些内容,则可以,您应该将图像以及标题中的图像保留在标题容器中。您可以轻松地解决重叠文本的问题,只需增加容器div的vh并以这种方式稍微向下移动banner-text top属性。
但是,如果情况不是上述情况,并且您希望将文本保持在该位置但使其可见,则可以将横幅文本从文本中移出并将其绝对从顶部放置。照原样,当z-index仍在容器div内时将其调整为0(例如)将没有任何效果,因为容器div的z-index为-1将优先,并且如果调整得更高,则图像也会重叠
希望这会有所帮助
.header-banner-container {
background: #221E1F;
position: relative;
width: 100%;
height: 11vh;
top: 38px;
z-index: -1;
}
.header-logo {
position: absolute;
padding-left: 3px;
height: 89px;
width: 92px;
}
.banner-text {
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: white;
position: absolute;
transform: translateY(-50%);
top: 70px;
z-index: 0;
}
<img class="header-logo img" src="http://ssl.gstatic.com/images/icons/gplus-32.png">
<div class="container-fluid header-banner-container">
</div>
<span class="banner-text">There is a cat above me</span>
答案 1 :(得分:1)
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Example</title>
<style>
.header-banner-container {
background: #221E1F;
position: relative;
width: 100%;
height: 11vh;
top: 38px;
z-index: -1;
}
.header-logo {
position: absolute;
padding-left: 3px;
height: 89px;
width: 92px;
border-radius: 100%;
}
.banner-text {
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: white;
position: absolute;
transform: translateY(-50%);
top: 49px;
z-index: 0;
left: 50px;
text-shadow: 0px 3px 3px black;
}
</style>
</head>
<body>
<img class="header-logo img" src="https://image.freepik.com/free-vector/geometric-background_23-2148064464.jpg">
<div class="container-fluid header-banner-container">
</div>
<span class="banner-text">There is a cat above me</span>
</body>
</html>