我想在我的页面背景上放置一个背景图像。
我有一个已完成的页面。现在我需要在页面的背景上放置一个图像,该图像位于中心并且将跨越浏览器的整个宽度。
是的,我知道令人困惑。我读的时候也没看懂。所以我加了一个 fiddle here
我想向包装器添加背景图像并将其置于两个 div 的中心,同时它可能比屏幕大。
<div class="wrapper">
<div class="container">
<div class="left">
Left content
</div><div class="right">
right content
</div>
</div>
</div>
希望现在它有意义。
最佳答案
您需要从 .container
中移除背景以在 .wrapper
上显示背景图像。并使用三个背景位置来调整它:
background-image: url()
- 包含图像。background-size: cover
- 覆盖整个背景大小。background-image: center
- 使其位于 div 的中心。
看看下面的片段:
.wrapper{
margin: 0 auto 0 auto;
max-width: 100%;
text-align: left;
background-image: url(http://placehold.it/200x200);
background-size: cover;
background-position: center;
}
.container{
position: relative;
max-width: 1280px;
height: 260px;
/* background: #ffffff; */
margin: 0 auto;
}
.left{
position:relative;
display:inline-block;
width:50%;
border:1px solid #000;
}
.right{
position:relative;
display:inline-block;
width:49%;
border:1px solid #000;
}
<div class="wrapper">
<div class="container">
<div class="left">Left Content</div><div class="right">Right Content</div>
</div>
</div>
希望这对您有所帮助!
关于html - 将图像绝对定位到全屏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41185713/