我想将页面分成两半。一侧是带有蓝色透明覆盖层的计算机显示器的图像。当盘旋时,这将变得更亮。同样在右侧有不同的图像(音乐手稿)。但是,这在实践中不起作用,只是折叠到左侧的一个DIV块。
码:
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>
只是另一个简单的替代方案,完全避免浮动。使用flexbox,您不需要浮动或定位元素。希望能帮助到你 :)
html,
body {
background-color: black;
height: 100%;
width: 100%;
margin: 0;
}
.fc {
display: flex;
width: 100%;
height: 100%;
}
.leftImage {
width: 50%;
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%;
}
.rightImage {
width: 50%;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/9d/BWV605.png");
background-position: center;
}
div.left {
width: 50%;
height: 100%;
position: absolute;
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 {
width: 50%;
height: 100%;
position: absolute;
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);
}
}
<div class="fc">
<div class="leftImage">
<div class="left">
<p>Test.</p>
</div>
</div>
<div class="rightImage">
<div class="right">
<p>Test.</p>
</div>
</div>
</div>