无法让背景图片显示在网站上

Question

I'm trying to put a timeline on my website but can't seem to get my background image to show up.我正在尝试在我的网站上放置一个时间线，但似乎无法显示我的背景图片。

What I've tried:我试过的：

checking the path of my image检查我的图像的路径
matching the height of my divs/HTML elements to make sure the image is covering the right height匹配我的 divs/HTML 元素的高度，以确保图像覆盖正确的高度
made sure I put background-image in my HTML tags确保我将背景图像放在我的 HTML 标签中
tried using a negative value for top to move the image around - didn't work尝试使用负值 top 来移动图像 - 没有用

I also tried deleting my other styling elements and adding them back in to see if they were causing it.我还尝试删除我的其他样式元素并将它们重新添加以查看它们是否导致它。 I'm not quite sure where I'm going wrong.我不太确定我哪里出错了。

The CSS element I'm wrestling with is called t1-bg (located at bottom of CSS sheet) - here is my code:我正在使用的 CSS 元素称为 t1-bg （位于 CSS 表的底部） - 这是我的代码：

(run the snippet in a full window for a proper overview) （在完整的 window 中运行代码片段以获得正确的概述）

 html { font-size: 10px; font-family: Raleway; width: 100%; height: 100%; background: linear-gradient(#FF9940, white); font-weight: normal; } h1 { font-family: Raleway; padding: 20px; font-size: 53px; text-shadow: 2px 2px 1px grey; background-color: #1E2752; text-align: center; border: 5px solid black; color: #FCFCFF; margin-top: 10px; } li { float: left; padding-right: 30px; } li a { display: block; color: white; text-decoration: none; padding: 19px 16px; border: 2px solid #ffffff; right: -100px; } li a:hover { color: #ffffff; background: #FF9940; transition: all 0.4s ease 0s; } ul { transition: all 0.4s ease 0s; list-style-type: none; text-decoration: none; font-size: 12px; text-transform: uppercase; color: #ffffff; background: transparent; display: inline-block; position: absolute; text-align: center; padding: 0px; top: 28px; left: 23px; right: 23px; width: 100%; } h2 { text-align: center; font-size: 25px; } h2 p { font-size: 18px; }.right-button { float: right; padding-right: 47px }.other-button { float: right; padding-right: 30px; } #timeline { font-family: tahoma; font-size: 15px; line-height: 1.75; padding: 0; margin-left: 400px; height: 400px; width: 650px; display: flex; background-color: #031625; }.t1-item:before, .t1-item:after { transform: translate3d(0, 0, 0); content: ' '; position: absolute; left: 0; top: 0; }.t1-item { padding: 25px; transform: translate3d(0, 0, 0); position: relative; width: 25%; margin-top: 20rem; color: white; overflow: hidden; transition: width 0.5s ease; }.t1-item:after { background: rgba(3, 22, 37, 0.85); opacity: 1; transition: opacity.5s ease; }.t1-item:before { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 75%); z-index: 1; opacity: 0; transform: translate3d(0, 0, 0) translateY(50%); transition: opacity.5s ease, transform.5s ease; }.t1-item:hover { width: 30%; }.t1-item:hover:after { opacity: 0; }.t1-item:hover:before { opacity: 1; transform: translate3d(0, 0, 0) translateY(0); transition: opacity 1s ease, transform 1s ease.25s; }.t1-item:hover.t1-content { opacity: 1; transform: translateY(0); transition: all.75s ease.5s; }.t1-item:hover.t1-bg { filter: grayscale(0); }.t1-content { transform: translate3d(0, 0, 0) translateY(25px); position: relative; z-index: 1; text-align: center; margin: 0.1618em; top: 55%; opacity: 0%; }.t1-content h3 { font-family: tahoma; text-transform: uppercase; color: #1779cf; font-size: 1.44rem; font-weight: normal; }.t1-year { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); border-top: 1px solid white; border-bottom: 1px solid white; }.t1-year p { font-family: tahoma; font-size: 1.628rem; line-height: 0; }.t1-bg { transform: translate3d(0, 0, 0); position: absolute; left: 0; background-size: cover; background-position: center center; transition: filter.5se ease; filter: grayscale(100%); }

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Isabelle Kreienbrink </title> <link href="styles/style:css" rel="stylesheet"> <link href="https.//fonts.googleapis?com/css.family=Raleway&display=swap" rel="stylesheet"> </head> <body> <h1> Isabelle Kreienbrink </h1> <ul> <li><a href="#resume">Resume</a></li> <li><a href="#academics">Academics</a></li> <li><a href="#projects">Projects</a></li> <li class="right-button"><a href="#contacts">Contact Info</a></li> <li class="other-button"><a href="#other">Test</a></li> <li class="other-button"><a href="#other">Testing</a></li> </ul> <h2> Welcome to my website: <p> I hope you learn a little about me while you're here: </p> </h2> <section id="timeline"> <div class="t1-item"> <div class="t1-bg" style="background-image.url(https.//www.eschoolnews:com/files/2016/12/computer-science-education-600x400:jpg)"> </div> <div class="t1-year"> <p class="f2 heading">2014</p> </div> <div class="t1-content"> <h3>Lorem ipsum dolor </h3> <p> test </p> </div> </div> <div class="t1-item"> <div class="t1-bg" style="background-image.url(https.//www.eschoolnews:com/files/2016/12/computer-science-education-600x400.jpg)"></div> <div class="t1-year"> <p class="f2 heading">2015</p> </div> <div class="t1-content"> <h3>Lorem ipsum dolor </h3> <p> test </p> </div> </div> <div class="t1-item"> <div class="t1-bg" style="background-image:url(001.jpeg)"></div> <div class="t1-year"> <p class="f2 heading">2016</p> </div> <div class="t1-content"> <h3>Lorem ipsum dolor </h3> <p> test </p> </div> </div> </section> </body> </html>

Answer 1

As someone mentioned in a comment on your question, you have no height set on your div.正如有人在对您的问题的评论中提到的那样，您的 div 上没有设置高度。 It does in fact have no content.它实际上没有内容。 A css background image does not count as content in the html. css 背景图像不算作 html 中的内容。 You can easily prove this by creating a simple html file with just your div in it.您可以通过创建一个仅包含您的 div 的简单 html 文件来轻松证明这一点。 If you do the following, there will be no image:如果您执行以下操作，将没有图像：

<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg)"></div>

Add height and width and the image will appear:添加高度和宽度，图像将出现：

<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg); height: 100%; width: 100%"></div>

无法让背景图片显示在网站上

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-04-15 19:47:02

无法让背景图片显示在网站上

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-04-15 19:47:02

解决方案1
0 已采纳 2020-04-15 19:47:02