Question

我正在尝试不使用CSS设置背景图片。当内容显示在图像上方时，如何在HTML文档中进行设置？

我希望图像随着浏览器宽度的变化而响应。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Rapid Weather</title>
    <link rel = "stylesheet" href = "style.css" />
  </head>
  <body>
      <img src="images/sunny.png" alt="sunny picture" class="img">
    <section id = "weather-wrapper" class = "container-fluid">
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <div id = "weather-info">
            <span id = "temperature"></span><span id="unit">&#176;C</span><br><br>
            <p id = "city"></p>
            <p id = "climate"></p>
            <img id = "icon" />
          </div>
          <div id="error-info">
            <h1><span class="fa fa-warning"></span><span id="err-msg"> City not found</span></h1>
          </div>
        </div>
      </div>
    </section>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src = "script.js"></script>
  </body>
</html>

当我现在设置图像时，内容位于图像下方，并且我无法使图像位于显示脚本的后面。我无法在CSS中使用主体选择器，因为它会更改正在显示的其余内容。

@import url('https://fonts.googleapis.com/css?family=Anton|Mogra|Lobster|Josefin+Sans');

body {
    color: #ffffff;
}

img {
    max-height: 100%;
    max-width: 100%;
}
a {
  text-decoration: none;
  color: #616161;
  transition: linear 0.3s;
}

a:hover {
  text-decoration: none;
  color: #fafafa;
}

#weather-wrapper, #error-info {
  transform: translateY(80px);
  text-align: center;
}

#temperature-wrapper {
  border: solid 1px #212121;
  border-radius: 100%;
}

#error-info, #weather-info {
  display: none;
}

#title {
  font-size: 55px;
  font-family: 'Lobster', cursive;
}

#search, #weather-info {
  margin-top: 40px;
}

#city, #temperature, #search input, #unit, #climate, #err-msg {
    font-family: 'Josefin Sans', sans-serif;
}

#city, #climate {
  font-size: 25px;
  text-transform: capitalize;
}

#temperature,  #unit {
  font-size: 40px;
}

#search {
  position: relative;
}

#search input {
  text-indent: 30px;
  height: 50px !important;
  border-radius: 0;
  font-size: 20px;
  color: #000000;
}

#search .fa-search {
  color: grey;
  position: absolute;
  top: 17px;
  left: 17px;
  font-size: 15px;
}

#unit {
  transition: linear 0.2s;
}
#unit:hover {
  cursor: pointer;
  color: #ff4436;
}

Answer 1

又快又脏

向有问题的img标签添加id="bg-image"属性，然后应用以下CSS：

img#bg-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

关键的部分是，#bg-image仅分配给设置了position的元素，因此为z-index分配了position属性。

正确的方法

您应该考虑通过JS在容器上设置background-image属性，或者通过JS将class动态添加到容器元素。即：

如果在相关位置晴，

<section id="weather-wrapper" class="container-fluid">会变成<section id="weather-wrapper" class="container-fluid sunny">）。相应地，背景图片将在CSS中预定义，即

#weather-wrapper.sunny {
    background-image: url(images/sunny.png);
}

#weather-wrapper.rainy {
    background-image: url(images/rainy.png);
}

/* etc. */

Answer 2

要居中，请看这里：CSS Styling Images

要在背景中显示图像，可以为其他元素赋予正的z索引。那可能有用。

Answer 3

我不确定为什么您反对将CSS用于背景图像。这样做不仅可以解决问题，还可以缩放背景图像，使其始终适合所有视口大小（请参见：https://css-tricks.com/perfect-full-page-background-image/）

但是，由于您为背景指定了非CSS解决方案，请参见下面的示例，其中我将#weather-wrapper定位在绝对位置。

body {
  color: #ffffff;
  margin: 0;
}

#weather-wrapper {
  position: absolute;
  background: rgba(255, 0, 0, 0.2);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 80%;
  height: 80%;
  margin: auto;
  border: 10px solid red;
  text-align: center;
}

<img src="https://baconmockup.com/800/800" alt="placeholder" class="img" width="100%">
<section id="weather-wrapper" class="container-fluid">
  This element is positioned absolutely
</section>

假设您可以克服“ without CSS”子句，则可以按如下所示进行操作。通过在html的style属性中设置背景图像（以便可以动态/每页设置），并将使响应式背景所需的其余样式分离到样式表中。 EG：

html { 
  background-repeat:no-repeat;
  background-position:center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
    color: #ffffff;
}

#weather-wrapper {
/* temp styles so we can see this elemennt in the snippet */
border:10px solid red;
}

<!DOCTYPE html>
<html lang="en" style="background-image:url('https://baconmockup.com/600/800')">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Rapid Weather</title>
    <link rel = "stylesheet" href = "style.css" />
  </head>
  <body>
    <section id = "weather-wrapper" class = "container-fluid">
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <div id = "weather-info">
            <span id = "temperature"></span><span id="unit">&#176;C</span><br><br>
            <p id = "city"></p>
            <p id = "climate"></p>
            <img id = "icon" />
          </div>
          <div id="error-info">
            <h1><span class="fa fa-warning"></span><span id="err-msg"> City not found</span></h1>
          </div>
        </div>
      </div>
    </section>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src = "script.js"></script>
  </body>
</html>

如何设置背景图片的样式并覆盖上方的内容

3 个答案:

又快又脏

正确的方法