Question

我的html代码如下所示：

objectsR = ""
for objects in mylist:
    objects = objects.replace('hello', "hi")
    objectsR = objectsR + objects
return objectsR

和.css中的content-wrapper部分如下：

<div class="content-wrapper">
  <div class="center">
    <h1>heading</h1>
  </div>
  <div class="lr">
    <p> paragraph </p>
  </div>
</div>

我无法获得文本背后的背景图片。我不想通过直接身体标签设置背景图像。我被困在这里。请帮忙。感谢

Answer 1

这是你所期望的吗？如果是，您的代码似乎没问题。确保您的图像被很好地引用。

＆＃13;

.content-wrapper{ 
    background-image: url("http://res.cloudinary.com/sayob/image/upload/v1526907328/483257_vwhhfw.jpg");  
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover;
}

＆＃13;

<div class="content-wrapper">
  <div class="center">
    <h1>heading</h1>
  </div>
  <div class="lr">
    <p> paragraph </p>
  </div>
</div>

＆＃13;

Answer 2

@Akansha，您的代码很好，但您没有给容器一个高度。换句话说，你的背景就在那里，你就是看不到它。

默认情况下，块元素的默认宽度为100％，但没有默认高度。背景图像也不影响元素的高度。因此，必须添加一个高度。

.content-wrapper{ 
    height: 100vh;
    background-image: url("http://res.cloudinary.com/sayob/image/upload/v1526907328/483257_vwhhfw.jpg");  
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover;
}

<div class="content-wrapper">
  <div class="center">
    <h1>heading</h1>
  </div>
  <div class="lr">
    <p> paragraph </p>
  </div>
</div>

您可以在此处看到此代码生效：https://jsfiddle.net/j_pinder/nkLf03ao/2/

Answer 3

您还必须给出图像的高度。 height:100vh vh: hundredths of the viewport height。您也可以在px或percentage中定义身高。

.content-wrapper{ 
    background-image: url("https://preview.ibb.co/e5OShF/cropped_800_480_111290.jpg ");  
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover;
  height: 100vh;
}

<div class="content-wrapper">
  <div class="center">
    <h1>heading</h1>
  </div>
  <div class="lr">
    <p> paragraph </p>
  </div>
</div>

为什么背景图像没有出现？

3 个答案: