Question

我为这个非常无聊的问题道歉，但我在这里找不到类似的问题。

所以我的 html 看起来像这样：

<div id="headerone">
   <h1>How To <br> Bench Press</h1>
</div>

我的CSS看起来像这样：

    #headerone {
            background: url(http://www.prodality.com/wp-content/uploads/2013/03/Workout.jpg);
            background-repeat: no-repeat;
            background-position:center;
            height:630px;   
            padding-top: 100px;
            padding-left: 600px;
        }
        #headerone h1 {
            background-color: black;
            display: inline;
            font-size: 30px;
            color: white;
            line-height: 50px;
            padding: 10px;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;

我希望有一个宽度为100％的背景英雄形象，我正试图达到这个效果：

http://codepen.io/anon/pen/Wbaapq

在我的图像之上，但如果我将背景图像的宽度设为100％，它也会改变文本的宽度。

使用上面的代码，一切都应该是它的位置，但是当我使浏览器窗口变小时，文本的位置似乎是绝对的，并且不会与我的其余代码一起移动。有没有更好的方法来做到这一点，或者我输错了什么？我还需要添加什么吗？请告诉我，谢谢！

最诚挚的问候， Omgummy

Answer 1

使用@media breakpoints demo

@media (max-width: 400px) {
  .padded-multiline {
    width: 100%;
  }
}

图像上的填充文本

1 个答案: