个人中心
gpt4 book ai didi

css - 如何设置背景图像的样式并覆盖上面的内容

转载 作者：行者123 更新时间：2023-11-28 00:00:18 24 4
gpt4 key购买 nike

我正在尝试不使用 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 中使用 body 选择器，因为它会更改显示的其余内容。

@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;
}

最佳答案

快速而肮脏

添加 id="bg-image"将属性添加到相关的 img 标签并应用以下 CSS:

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

关键部分是 #bg-image被分配了一个 position自z-index以来的属性(property)仅适用于具有 position 的元素设置。

正确的方法

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

<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. */

关于css - 如何设置背景图像的样式并覆盖上面的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56026929/

24 4 0
文章推荐： html - 如何动态更改 NodeJs Express 应用程序中使用的 HTML 模板中样式的 "width"
文章推荐： java - Http request.getParameter( fieldname ) 与 List
文章推荐： javascript - getCurrentPosition() 在 Firefox 中不起作用
文章推荐： python - 解析 HTML Python, BeautifulSoup
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com