Question

我正在编写一个由一些HTML和CSS组成的网站。当我遇到问题时，我正在编程中。当我尝试移动文本时，背景图像随之移动，因此我无法在背景图像上显示文本overlayed。

我的网站如下：

I want the 'RESPITORY SYSTEM' part over the image

这是我的代码：

<!doctype html>
<html lang=''>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
   <title>Respitory System</title>
</head>
<body>

<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'>Home</a></li>
   <li><a href='#'>Products</a></li>
   <li><a href='#'>Company</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</body>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-position: 20px;
  background-repeat: no-repeat;
  background-size: cover;
  line-height: 250%;
}
.caption {
  position: absolute;
  left: 0%;
  top: 100%;
  width: 100%;
  text-align: center;
  color: #000;
}


.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 20px;
  font-size: 25px;
  letter-spacing: 20px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}
</style>
</head>

<style>

body, html {
    height: 100%;
    margin: 0;
}
</style>
</head>
<body>
<div class="bg"></div>

</style>
</head>
<style>

.bg {
    /* The image used */
    background: url('https://i.pinimg.com/originals/68/5e/18/685e18ff8147427079a14ce27d984688.jpg');

    /* Full height */
     height:450px;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: repeat-x;  
    background-size: cover;
}

</style>

<div id="backimage">
<br>
<body background=backimage>
</div>
<div class="bgimg-1">
  <div class="caption">

<div class="w3-container w3-center w3-animate-top">
    <span class="border">RESPITORY SYSTEM</span>
  </div>
</div>
<html>

我的styles.css：

@import url(http://fonts.googleapis.com/css?family=Raleway); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #cssmenu { width: auto; border-bottom: 3px solid #47c9af; font-family: Raleway, sans-serif; line-height: 0; } #cssmenu ul { background: #ffffff; } #cssmenu > ul > li { float: left; } #cssmenu.align-center > ul { font-size: 0; text-align: center; } #cssmenu.align-center > ul > li { display: inline-block; float: none; } #cssmenu.align-right > ul > li { float: right; } #cssmenu.align-right > ul > li > a { margin-right: 0; margin-left: -4px; } #cssmenu > ul > li > a { z-index: 2; padding: 18px 25px 12px 25px; font-size: 15px; font-weight: 400; text-decoration: none; color: #444444; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; margin-right: -4px; } #cssmenu > ul > li.active > a, #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover { color: #ffffff; } #cssmenu > ul > li > a:after { position: absolute; left: 0; bottom: 0; right: 0; z-index: -1; width: 100%; height: 120%; border-top-left-radius: 8px; border-top-right-radius: 8px; content: ""; -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; -webkit-transform: perspective(5px) rotateX(2deg); -webkit-transform-origin: bottom; -moz-transform: perspective(5px) rotateX(2deg); -moz-transform-origin: bottom; transform: perspective(5px) rotateX(2deg); transform-origin: bottom; } #cssmenu > ul > li.active > a:after, #cssmenu > ul > li:hover > a:after, #cssmenu > ul > li > a:hover:after { background: #47c9af; }

（道歉，代码不会垂直向下）

如果您需要更多信息，请询问。

编辑：更改了CSS＆＃39; CSS＆＃39;到＆＃39; HTML和CSS＆＃39;。

Answer 1

您有两种方法可以解决这种情况：

1-使用具有响应测量的绝对位置（vh-vw，vmin-vmax）。例如：

h1.title{
  position: absolute;
  left: 20vw;
  top:25vh;
}

<div class="content">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTPGf2xetXnwKbT-8mWJWQHGpJyRHUL0Icn9HbfwB_4DNcLPzX">
<h1 class="title">Hello</h1>
</div>

2-使用背景图像而不是将图像用作块，然后将文本居中：

.content{
  width: 100%;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTPGf2xetXnwKbT-8mWJWQHGpJyRHUL0Icn9HbfwB_4DNcLPzX');
}
h1.title{
  text-align: center;
  padding-top: 30vh;
}

<div class="content">
<h1 class="title">Hello</h1>
</div>

Answer 2

所以有一些事情。我经历了整理你已经准备好的东西。这样做可以看到一些你需要研究的事情。

您的工作中有很多<body>和<html>个标签。大概你发现了一些事情的例子并想让它发挥作用。

This网站在这里详细说明了html文档应该是什么样子，并解释了放置某些内容的位置。它在顶部有一个简单的例子，并在进入时详细介绍。

您还有很多重复的代码和一些随机的<link>代码和<script>代码。确保你知道他们在做什么。您可以在同一site上阅读有关它们的信息。最终，他们将来自其他地方的css和javascript包括在内。

以下是我最终得到的代码。可能有一些更好的方法可以做到这一点，但请尝试理解您正在抓取的代码。祝你好运！

＆＃13;

body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}


.caption {
  position: absolute;
  left: 0%;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}


.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 20px;
  font-size: 25px;
  letter-spacing: 20px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}


.bg {
    background: url('https://i.pinimg.com/originals/68/5e/18/685e18ff8147427079a14ce27d984688.jpg');
    height:450px;
    background-position: center;
    background-repeat: repeat-x;  
    background-size: cover;
    position:relative;
}

＆＃13;

<!doctype html>
<html lang=''>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Respitory System</title>
</head>

<body>

  <ul id='cssmenu'>
     <li class='active'><a href='#'>Home</a></li>
     <li><a href='#'>Products</a></li>
     <li><a href='#'>Company</a></li>
     <li><a href='#'>Contact</a></li>
  </ul>

  <div class="bg">
    <div class="caption">
      <span class="border">RESPITORY SYSTEM</span>
    </div>
   </div>
  </body>
</html>

＆＃13;

HTML和CSS：随背景图像移动的文本（无法移动文本）

2 个答案: