英文:
I need to position background image to the right of container and a small box of text inside of it to be floating to the left (& overlapping the img)
问题
这是我想在桌面和移动设备上实现的效果:
而这是我迄今为止所做的:
.container {
background-image: url("https://houniqueconstruction.com/wp-content/uploads/2023/02/peng-chen-WFgSotZQECo-unsplash-copy-1024x803.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height: 700px;
}
.flexbox {
display: flex;
justify-content: center;
align-items: center;
min-height: 700px;
}
.text-box {
max-width: 350px;
background: #f6f6f6;
padding: 30px 20px;
}
<div class="container">
<div class="flexbox">
<div class="text-box">
<h1>Complete Remodeling</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrude dolore magna.</p>
<a>CONTACT US</a>
</div>
</div>
</div>
我尝试使用CSS属性background-image来实现布局,但是我缺乏达到预期效果所需的知识。
英文:
Here's what I want to achieve both for desktop and mobile:
And here's how far I've gotten with it
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
background-image: url("https://houniqueconstruction.com/wp-content/uploads/2023/02/peng-chen-WFgSotZQECo-unsplash-copy-1024x803.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height:700px;
}
.flexbox {
display:flex;
justify-content:center;
align-items: center;
min-height: 700px;
}
.text-box {
max-width:350px;
background:#f6f6f6;
padding: 30px 20px;
}
<!-- language: lang-html -->
<div class="container">
<div class="flexbox">
<div class="text-box">
<h1>Complete Remodeling</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrude dolore magna.</p>
<a>CONTACT US</a>
</div>
</div>
</div>
<!-- end snippet -->
I tried to achieve a layout with the CSS property background-image, however I lack the knowledge to achieve what I was expecting
答案1
得分: 1
以下是翻译好的内容,代码部分未翻译:
For desktop we use margin-left
on the container and offset the .text-box
in the opposite direction.
对于桌面版本,我们在容器上使用 margin-left
并将 .text-box
在相反方向进行偏移。
For mobile we need to add an absolutely-positioned semi-transparent background element inside .text-box
.
对于移动版本,我们需要在 .text-box
内添加一个绝对定位的半透明背景元素。
body {
background-color: #f6f6f6;
}
.container {
background-image: url("https://houniqueconstruction.com/wp-content/uploads/2023/02/peng-chen-WFgSotZQECo-unsplash-copy-1024x803.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height: 700px;
}
.container.desktop {
margin-left: 175px;
}
.flexbox {
display: flex;
align-items: center;
min-height: 700px;
}
.container.mobile .flexbox {
justify-content: center;
}
.text-box {
position: relative;
max-width: 350px;
padding: 30px 20px;
}
.container.desktop .text-box {
left: -175px;
}
.text-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #f6f6f6;
}
.container.mobile .text-background {
opacity: 0.5;
}
.text-content {
position: relative;
z-index: 1;
}
Complete Remodeling
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrude dolore magna.
Complete Remodeling
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrude dolore magna.
英文:
For desktop we use margin-left
on the container and offset the .text-box
in the opposite direction.
For mobile we need to add an absolutely-positioned semi-transparent background element inside .text-box
.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
background-color: #f6f6f6;
}
.container {
background-image: url("https://houniqueconstruction.com/wp-content/uploads/2023/02/peng-chen-WFgSotZQECo-unsplash-copy-1024x803.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height:700px;
}
.container.desktop {
margin-left: 175px;
}
.flexbox {
display:flex;
align-items: center;
min-height: 700px;
}
.container.mobile .flexbox {
justify-content: center;
}
.text-box {
position: relative;
max-width:350px;
padding: 30px 20px;
}
.container.desktop .text-box {
left: -175px;
}
.text-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #f6f6f6;
}
.container.mobile .text-background {
opacity: 0.5;
}
.text-content {
position: relative;
z-index: 1;
}
<!-- language: lang-html -->
<div class="container desktop">
<div class="flexbox">
<div class="text-box">
<div class="text-background"></div>
<div class="text-content">
<h1>Complete Remodeling</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrude dolore magna.</p>
<a>CONTACT US</a>
</div>
</div>
</div>
</div>
<div class="container mobile">
<div class="flexbox">
<div class="text-box">
<div class="text-background"></div>
<div class="text-content">
<h1>Complete Remodeling</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrude dolore magna.</p>
<a>CONTACT US</a>
</div>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论