代码之家 › 专栏 › 技术社区 › shirshamay

无法理解为什么我的背景图像不显示[关闭]

background-image css

0

shirshamay · 技术社区 · 2 年前

我试图在.heor上显示背景图像,这意味着图像将位于页面的中心,但图像根本不会显示。在“devtools”中,它在图像旁边显示一个警告标志。

我试图将图像放在身体上,并消除我在CSS中放置的绝对位置;然而,这并没有影响结果。请帮忙。我认为绝对位置可能会推动其他元素,比如有背景图像的.heor类。我还尝试了用“”和两个点甚至一个点以多种方式书写。

.hero {
  background-image: url("https://picsum.photos/100/100") center center/cover
    no-repeat;
  margin-top: 8rem;
  padding: 11.5rem 2rem 8rem;
  position: relative;
  overflow-x: hidden;
}

<header class="hero">
  <div class="container-heroflex">
    <div class="hero-content">
      <h1>Create your own video courses</h1>
      <p>
        dive deep into the world of creativity and learn to craft stunning
        videos that captivate your audience
      </p>
      <a href="#" class="btn">29$ Get Course</a>
    </div>
    <div class="hero-img">
      <img src="https://picsum.photos/300/300" alt="header-course" />
    </div>
  </div>
</header>

3 回复 | 直到 2 年前

1

Foysal Kabir Shimul 2 年前

您需要将背景图像的位置、大小分开,并在不同的行中重复。

.hero {
        background-image: url('../images/header-background.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        margin-top: 8rem;
        padding: 11.5rem 2rem 8rem;
        position: relative;
        overflow-x: hidden;
    }

2

0

m-sarabi 2 年前

引用自 CSS background docs

这个 background 简写CSS属性一次设置所有背景样式属性,如颜色、图像、原点和大小,或重复方法。未在后台速记属性值声明中设置的组件属性将设置为默认值。

只需使用 背景 财产而不是 background-image 这样地:

.hero {
  background: url('https://m-sarabi.ir/assets/personal-header.jpg') center center/cover no-repeat;
  margin-top: 8rem;
  padding: 11.5rem 2rem 8rem;
  position: relative;
  overflow-x: hidden;
}

<header class="hero">
  <div class="container-heroflex">
    <div class="hero-content">
      <h1>Create your own video courses</h1>
      <p>dive deep into the world of creativity and learn to craft stunning videos that captivate your audience
      </p>
      <a href="#" class="btn">29$ Get Course</a>
    </div>
  </div>
</header>

3

0

Jelle de Bie 2 年前

您可以尝试使用以下代码:

.hero {
background: url('../images/header-background.jpg') center center / cover no-repeat;
margin-top: 8rem;
padding: 11.5rem 2rem 8rem;
position: relative;
overflow-x: hidden;

}

我希望这对你有所帮助。