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)

huangapple go评论54阅读模式
英文:

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)

问题

这是我想在桌面和移动设备上实现的效果:

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)

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:

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)

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)

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(&quot;https://houniqueconstruction.com/wp-content/uploads/2023/02/peng-chen-WFgSotZQECo-unsplash-copy-1024x803.jpg&quot;);
  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 -->

&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;flexbox&quot;&gt;
    &lt;div class=&quot;text-box&quot;&gt;
      &lt;h1&gt;Complete Remodeling&lt;/h1&gt;
      &lt;p&gt; 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.&lt;/p&gt;
      &lt;a&gt;CONTACT US&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- 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.

CONTACT US

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.

CONTACT US

英文:

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(&quot;https://houniqueconstruction.com/wp-content/uploads/2023/02/peng-chen-WFgSotZQECo-unsplash-copy-1024x803.jpg&quot;);
  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 -->

&lt;div class=&quot;container desktop&quot;&gt;
  &lt;div class=&quot;flexbox&quot;&gt;
    &lt;div class=&quot;text-box&quot;&gt;
      &lt;div class=&quot;text-background&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;text-content&quot;&gt;
        &lt;h1&gt;Complete Remodeling&lt;/h1&gt;
        &lt;p&gt; 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.&lt;/p&gt;
        &lt;a&gt;CONTACT US&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;container mobile&quot;&gt;
  &lt;div class=&quot;flexbox&quot;&gt;
    &lt;div class=&quot;text-box&quot;&gt;
      &lt;div class=&quot;text-background&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;text-content&quot;&gt;
        &lt;h1&gt;Complete Remodeling&lt;/h1&gt;
        &lt;p&gt; 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.&lt;/p&gt;
        &lt;a&gt;CONTACT US&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月9日 02:35:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/75390303.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定