在CSS中,对于小屏幕的媒体查询中,将背景逐渐淡化。

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

Fade background in media query for small screens in CSS

问题

我试图在左侧显示文本,右侧显示图像的简单页面上添加媒体查询,使图像淡化为背景,并在文本后面变得非常轻。我尝试添加线性渐变,但似乎一切都无法正常工作。我最初将图像设置为display: none,以为我只需在后面再次添加它作为背景图像,因为CSS从上到下移动,但这只会使我的屏幕背景变为白色。然后我添加了这个线性渐变,虽然它在开发工具中显示出来,但没有生效,也没有被划掉或其他任何显示问题。

我尝试将home-img设置为display: none,然后在bodysection中添加背景图像。

如您在第一张图中所见,它看起来很好。第二张图是我在代码上遇到问题的地方。我希望背景非常淡,以便您可以阅读文本。以下是我的代码片段。

HTML:

<section class="home">
  <img
    src="images/home-img.jpg"
    class="home-img"
    alt="穿着条纹衬衫坐在豆袋椅上在笔记本电脑上输入的男人"
  />
  <div class="home-content">
    <h1>您成功所需的一切。</h1>
    <p>
      我们使用战略性的创造力来区分我们的客户与竞争对手,让他们的信息脱颖而出,与观众建立联系并共鸣。
    </p>
    <a href="contact.html" class="btn">开始</a>
  </div>
</section>

CSS:

section {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
  padding: 100px;
  margin-top: 60px;
}

section.home {
  flex-direction: row;
  margin-top: 0;
}

.home-img {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 110%;
}

@media (max-width: 995px) {
  .logo {
    top: 10px;
    left: 40px;
    font-size: 1.5rem;
  }

  section {
    padding: 100px 40px;
  }

  .navigation ul li a {
    font-size: 2rem;
  }

  section {
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.561),
        rgba(255, 255, 255, 0.561)
      ),
      url(images/home-img.jpg);
    background-size: cover;
  }
}

@media (max-width: 680px) {
  h1 {
    font-size: 1.5rem;
    margin-top: 150px;
  }

  .home-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

我尝试将home图像设置为display: none,然后使用线性渐变再次添加它作为背景图像。这使背景呈现为灰色,但没有应用图像。

英文:

I am trying to take this simple page with text on the left and an image on the right and add a media query so that the image fades to the background and becomes very light behind the text. I have tried adding linear gradients but nothing seems to be working. I set the image to display none at first thinking i would just add it again as a background image after since css moves from top to bottom but that just made my screen background white. Then I added this linear gradient which is not working at all although it is showing up in dev tools and not crossed out or anything.

I tried setting home-img to display none and then adding background image to body or section.

As you can see in the first image, it looks fine. The second is where I am having trouble with the code. I would like the background to be very light so you can read the text. Attached are my code snippets.

I tried editing home-img in the media query.<https://github.com/aloha-suzanne/propelagency>

在CSS中,对于小屏幕的媒体查询中,将背景逐渐淡化。在CSS中,对于小屏幕的媒体查询中,将背景逐渐淡化。

HTML:

&lt;section class=&quot;home&quot;&gt;
      &lt;img
        src=&quot;images/home-img.jpg&quot;
        class=&quot;home-img&quot;
        alt=&quot;man in striped shirt sitting on a bean bag chair while typing on his laptop&quot;
      /&gt;
      &lt;div class=&quot;home-content&quot;&gt;
        &lt;h1&gt;Everything you need to succeed online.&lt;/h1&gt;
        &lt;p&gt;
          We use strategic creativity to distinguish our clients from
          competitors, let their message stand out, connect and resonate with
          the audience.
        &lt;/p&gt;
        &lt;a href=&quot;contact.html&quot; class=&quot;btn&quot;&gt;Get started&lt;/a&gt;
      &lt;/div&gt;
    &lt;/section&gt;

CSS:

section {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
  padding: 100px;
  margin-top: 60px;
}

section.home {
  flex-direction: row;
  margin-top: 0;
}

.home-img {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 110%;
}

@media (max-width: 995px) {
  .logo {
    top: 10px;
    left: 40px;
    font-size: 1.5rem;
  }

  section {
    padding: 100px 40px;
  }

  .navigation ul li a {
    font-size: 2rem;
  }

  section {
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.561),
        rgba(255, 255, 255, 0.561)
      ),
      url(images/home-img.jpg);
    background-size: cover;
  }
}

@media (max-width: 680px) {
  h1 {
    font-size: 1.5rem;
    margin-top: 150px;
  }

  .home-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

I've tried setting the home image to display: none and then adding it again as a background image with a linear gradient. That is making the background appear gray but not applying the image.

答案1

得分: 1

我认为你的线性渐变语法不太正确。这个渐变生成器 适用于创建有效的渐变。

section {
    background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.9) 50%), url(https://images.pexels.com/photos/3277805/pexels-photo-3277805.jpeg);
    background-size: cover;
    width: 300px;
    padding: 10em 1em 1em;
}
<section>
  <h1>Everything you need to succeed online.</h1>
  <p>
    We use strategic creativity to distinguish our clients from
    competitors, let their message stand out, connect and resonate with
    the audience.
  </p>
  <p><a href="contact.html" class="btn">Get started</a></p>
</section>
英文:

I think your linear gradient syntax isn't quite correct. This gradient generator is excellent for creating gradients which work.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

section {
    background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.9) 50%), url(https://images.pexels.com/photos/3277805/pexels-photo-3277805.jpeg);
    background-size: cover;
    width: 300px;
    padding: 10em 1em 1em;
}

<!-- language: lang-html -->

&lt;section&gt;
  &lt;h1&gt;Everything you need to succeed online.&lt;/h1&gt;
  &lt;p&gt;
          We use strategic creativity to distinguish our clients from
          competitors, let their message stand out, connect and resonate with
          the audience.
  &lt;/p&gt;
  &lt;p&gt;&lt;a href=&quot;contact.html&quot; class=&quot;btn&quot;&gt;Get started&lt;/a&gt;&lt;/p&gt;
&lt;/section&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月14日 03:13:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/75440291.html
匿名

发表评论

匿名网友

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

确定