我想将页面分成两半。一侧是带有蓝色透明覆盖层的计算机显示器图像。将鼠标悬停在上面时，它会变得更亮。同样在右侧有不同的图像(音乐手稿)。然而，这在实践中行不通，只会折叠成左侧的一个 DIV block 。
代码:
html, body {
background-color: black;
height: 100%;
width: 100%;
margin: 0%;
}
div.leftImage {
/*Set up positioning:*/
display: block;
float: left;
width: 50%;
height: 100%;
z-index: 0;
position: absolute;
/*Set up the background:*/
background-image: url("https://images.pexels.com/photos/270360/pexels-photo-270360.jpeg?w=940&h=650&dpr=2&auto=compress&cs=tinysrgb");
background-position: 45%;
}
div.rightImage {
/*Set up positioning:*/
display: block;
float: right;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
/*Set up the background:*/
background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/9d/BWV605.png");
background-position: center;
}
div.left {
/*Set up positioning:*/
display: block;
float: left;
width: 50%;
height: 100%;
position: absolute;
z-index: 1;
/*Set up the background:*/
background-color: rgba(0, 150, 255, 0.5);
transition: background-color 0.25s ease;
}
div.left:hover {
background-color: rgba(0, 150, 255, 0.8);
}
div.right {
/*Set up positioning:*/
display: block;
float: right;
width: 50%;
height: 100%;
position: absolute;
z-index: 1;
/*Set up the background:*/
background-color: rgba(204, 0, 0, 0.5);
transition: background-color 0.25s ease;
}
div.right:hover {
background-color: rgba(204, 0, 0, 0.8);
}<!DOCTYPE html>
<html>
<body>
<div class="leftImage">
</div>
<div class="rightImage">
</div>
<div class="right">
<p>Test.</p>
</div>
<div class="left">
<p>Test.</p>
</div>
</body>
</html>提前致谢。
最佳答案
如果您使用position: absolute，float: left 等布局属性将不会有任何效果。
相反，使用 top、left、right 和 bottom 属性来控制绝对定位的元素:
html, body {
background-color: black;
height: 100%;
width: 100%;
margin: 0%;
}
div.leftImage {
/*Set up positioning:*/
z-index: 0;
position: absolute;
top: 0;
left: 0;
right: 50%;
bottom: 0;
/*Set up the background:*/
background-image: url("https://images.pexels.com/photos/270360/pexels-photo-270360.jpeg?w=940&h=650&dpr=2&auto=compress&cs=tinysrgb");
background-position: 45%;
}
div.rightImage {
/*Set up positioning:*/
z-index: 0;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
/*Set up the background:*/
background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/9d/BWV605.png");
background-position: center;
}
div.left {
/*Set up positioning:*/
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 50%;
bottom: 0;
/*Set up the background:*/
background-color: rgba(0, 150, 255, 0.5);
transition: background-color 0.25s ease;
}
div.left:hover {
background-color: rgba(0, 150, 255, 0.8);
}
div.right {
/*Set up positioning:*/
z-index: 1;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
/*Set up the background:*/
background-color: rgba(204, 0, 0, 0.5);
transition: background-color 0.25s ease;
}
div.right:hover {
background-color: rgba(204, 0, 0, 0.8);
}<!DOCTYPE html>
<html>
<body>
<div class="leftImage">
</div>
<div class="rightImage">
</div>
<div class="right">
<p>Test.</p>
</div>
<div class="left">
<p>Test.</p>
</div>
</body>
</html>关于html - 两个带有底层图像的独立 DIV 不会 float 到右侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47877404/