Question

我正在开发一个简单的投资组合网站。但是当我通过浏览器元素调整大小时，它会与backgorund图像重叠。

<div class="container">
        <div class="main-heading">
            <h1>Jegath S</h1>
        </div>

        <div class="desc">
            <p>
               I am a web developer and designer
               from INDIA . I engoy building anything
               using code . Need a website ?
               Leave it to me :)
           </p>
        </div>

        <div class="explore-button">
            <button class="btn"><a href="#works">Explore</a></button>
        </div>

        <div class="social-media">
            <i class="fa fa-facebook" aria-hidden="true"></i>
            <i class="fa fa-envelope" aria-hidden="true"></i>
            <i class="fa fa-phone" aria-hidden="true"></i>
        </div>
    </div>

这是css代码

*{
    margin: 0;
    padding: 0;
}

body ,html{
    font-family: 'Open Sans', sans-serif;
    background: f6f6f6;
    height: 100%;
    width: 100%;
}

.container{
    font-family: 'Vollkorn', serif;
    background-image: url(../images/bg-img.jpg) ;
    background-repeat: no-repeat;
    min-height: 100%;
    background-position: right;
    position: relative  ;
}

.main-heading{
    position: absolute;
    font-family: serif;
    font-size: 60px;
    top: 180px;
    left: 565px;
    display: inline-block; 
}

.desc{
    width: 304px;
    text-align: justify;
    letter-spacing: 1px;
    position: absolute;
    top: 400px;
    left: 410px;
    line-height: 35px;
}

.explore-button a{
    color: #fff;
    text-decoration: none;
}

.btn{
    width: 110px;
    height: 42px;
    background: #9A3FE0;
    border: none;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 2px;
    border-radius: 5px;
    text-align: center;
    position: absolute;
    top: 570px;
    left: 500px;
}


.social-media .fa{
    font-size: 25px;
    display: block;
    margin-bottom: 30px;
    margin-left: 45px;

}

.social-media .fa-facebook{
    position: absolute;
    top: 50%;
}

.social-media .fa-envelope{
    position: absolute;
    top: 40%;
}

.social-media .fa-phone{
    position: absolute;
    top: 60%;
}

请给我一个解决方案。

这是浏览器全宽时的图像

这是调整浏览器大小时的图像

如果有人能建议我解决方案，那将会非常有用。提前谢谢。

Answer 1

如果您不希望图像和文字重叠，请制作2 div并将图像右侧div作为背景图像，并在左侧div上显示文本。在那种情况下，他们不会重叠。

    <div class="row">
  <div class="container col-lg-6 col-md-6 col-xs-6 col-sm-6 right">
    Hi this is the text area. Write anything here.
  </div>

  <div class="container col-lg-6 col-md-6 col-xs-6 col-sm-6 left">

  </div>
</div>


    .left {
  height: 100vh;
  background-color: #ff0;
}

.right {
  height: 100vh;
}

这是JSFiddle：https://jsfiddle.net/r7pL5aub/1/

Answer 2

这是因为在你的主标题课上你写了：＆＃34;左：565px;＆＃34;。浏览器执行了您告诉他的操作，无论您使用的设备大小如何，都将h1保持为565。这也适用于desc类和探索按钮。为了使其适合移动设备，您需要使用媒体查询。查找有关他们的更多信息here。媒体查询的作用是您可以根据设备宽度编写自定义CSS。因此，他们是移动友好的。如果你不想打扰媒体查询，你可以改为将h1，段落和按钮放在右边：x px;而不是左：x px;

当我调整浏览器大小时，元素与图像重叠

2 个答案: