无法让背景图片显示在网站上
[英]Can't get background image to show up on website
问题描述
我正在尝试在我的网站上放置一个时间线，但似乎无法显示我的背景图片。
我试过的：
- 检查我的图像的路径
- 匹配我的 divs/HTML 元素的高度，以确保图像覆盖正确的高度
- 确保我将背景图像放在我的 HTML 标签中
- 尝试使用负值 top 来移动图像 - 没有用
我还尝试删除我的其他样式元素并将它们重新添加以查看它们是否导致它。 我不太确定我哪里出错了。
我正在使用的 CSS 元素称为 t1-bg （位于 CSS 表的底部） - 这是我的代码：
（在完整的 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>
1 个解决方案
解决方案1
0 已采纳 2020-04-15 19:47:02
正如有人在对您的问题的评论中提到的那样，您的 div 上没有设置高度。 它实际上没有内容。 css 背景图像不算作 html 中的内容。 您可以通过创建一个仅包含您的 div 的简单 html 文件来轻松证明这一点。 如果您执行以下操作，将没有图像：
<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg)"></div>
添加高度和宽度，图像将出现：
<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>
我正在编码一个网站。 背景图像的URL在CSS样式表中。 我无法显示图片
[英]I am coding a website. The URL for the background image is in the CSS style sheet. I can't get the image to show
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.