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

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

background-image css

shirshamay · 技术社区 · 11 月前

我试图在.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 回复 | 直到 11 月前

Foysal Kabir Shimul 11 月前

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

.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;
    }

m-sarabi 11 月前

引用自 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>

Jelle de Bie 11 月前

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

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

}

我希望这对你有所帮助。

推荐文章

Vida Khalili · 如何在Nextjs中设置背景图像?

3 年前

Laiqa Mohid · 反应-在使用SVG作为背景图像属性中的数据时,尝试将SVG填充颜色作为道具传递?

3 年前

user8076620 · javascript如何使用style属性查找包含背景图像的元素

7 年前

h2odev · 在具有动态宽度的div元素上调整背景图像

7 年前

Chris · 如何使用CSS缩放手机背景图像?

7 年前

Chris McCarthy · 如何在matplotlib雷达图中添加轮盘赌背景图像

7 年前

Fahim Parkar · UITextView背景图像正在滚动多行

7 年前

Polygami · 保持图像居中,同时保持100%的高度,仅延伸/裁剪侧面

7 年前

AlphaX · 如何交换透明背景图像

7 年前

TJ1 · 更改圆的背景图像

7 年前