后台CSS属性似乎无法正常工作
[英]Background CSS property doesn't seem to work correctly
问题描述
我是html和CSS的新手，我对此代码有疑问。 基本上，我/我想做的是在每个部分的后面放置一个背景图像（该图像应完全适合该部分）。 有了这种代码，什么都没发生，我可以将颜色更改为te section。 路径图片中没有错误，所以我有些困惑。
#logo { padding: 10px; display: block; margin: 0 auto; width: 190px; } #logo1 { padding: 10px; display: block; margin: 0 auto; width: 190px; z-index: 3; } header { z-index: 2; } html { height: 100%; } h1 { font-family: "ChicagoFLF", sans-serif; font-style: italic; font-size: 2em; text-align: center; margin-top: 0px; z-index: 1 } h2 { font-family: "ChicagoFLF", sans-serif; font-style: italic; font-size: 1em; text-align: center; margin: -15px; } h3 { font-family: "ChicagoFLF", sans-serif; font-size: 1em; text-align: center; margin: -15px; text-decoration: none; } } #back1 { position: relative; height: 100%; margin: 0; padding: 0; top: 0; left: 0; background-image: url('asset/background1.png'); } #back2 { position: relative; height: 100%; margin: 0; padding: 0; top: 0; left: 0; background-image: url('asset/background1.png'); } #back3 { position: relative; height: 100%; margin: 0; padding: 0; top: 0; left: 0; background-image: url('asset/background1.png'); } .onepage { position: relative; height: 100%; margin: 0; padding: 0; top: 0; left: 0; q } .more { display: block; position: relative; bottom: 1000px; top: 0; left: 0; } html { height: 100%; } body { height: 100%; } #push { position: absolute; bottom: 130px; margin: 0 auto; left: 47%; } #pushtext { position: absolute; bottom: 100px; margin: 0 auto; left: 46%; } #pushtext1 { position: absolute; bottom: 150px; margin: 0 auto; left: 46%; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/onepage.css" /> <script src="https://code.jquery.com/jquery-2.1.4.js" integrity="sha256-siFczlgw4jULnUICcdm9gjQPZkw/YPDqhQ9+nAOScE4=" crossorigin="anonymous"></script> <script type="text/javascript" src="js/onepage.js"></script> <title>One Page</title> </head> <body> <header> <div id="logo"><img id="logo1" src="asset/logoblack.png" alt=""></div> <h1> Andrea Lovati </h1> <h2> some text </h2> </header> <!--first section--> <section class="onepage" id="back1"> <div id="pushtext"> <a href="#second"> <h3>discover more</h3> </a> </div> <div id="push"><img src="asset/push.png"></div> </section> <!--second section--> <div id="back2"> </div> <!--third section--> <section id="back3"> </section> </body> </html>
3 个解决方案
解决方案1
3 已采纳 2017-03-13 16:02:13
背景图片网址存在问题。 当你说
background-image: url('asset/background1.png');
您正在告诉浏览器到css文件的位置，这是从文件到文件的相对路径。 假设CSS文件名为：
- myclasses.css
鉴于您所说的，包含文件夹应如下所示：
- myclasses.css->您的CSS文件
- 资产->文件夹
现在，“ asset”文件夹必须包含background1.png。
解决方案2
0 2017-03-13 16:02:02
最重要的错误是，你有一个superflous收盘}在你的CSS花括号，直接befor该规则back1 。 删除：
#logo { padding: 10px; display: block; margin: 0 auto; width: 190px; } #logo1 { padding: 10px; display: block; margin: 0 auto; width: 190px; z-index: 3; } header { z-index: 2; } html { height: 100%; } h1 { font-family: "ChicagoFLF", sans-serif; font-style: italic; font-size: 2em; text-align: center; margin-top: 0px; z-index: 1 } h2 { font-family: "ChicagoFLF", sans-serif; font-style: italic; font-size: 1em; text-align: center; margin: -15px; } h3 { font-family: "ChicagoFLF", sans-serif; font-size: 1em; text-align: center; margin: -15px; text-decoration: none; } #back1 { position: relative; height: 100%; margin: 0; padding: 0; top: 0; left: 0; background-image: url(http://placehold.it/600x450/cf9?text=back1); } #back2 { position: relative; height: 100%; margin: 0; padding: 0; top: 0; left: 0; background-image: url(http://placehold.it/600x450/9fc?text=back2); } #back3 { position: relative; height: 100%; margin: 0; padding: 0; top: 0; left: 0; background-image: url(http://placehold.it/600x450/fc9?text=back3); } .onepage { position: relative; height: 100%; margin: 0; padding: 0; top: 0; left: 0; } .more { display: block; position: relative; bottom: 1000px; top: 0; left: 0; } html { height: 100%; } body { height: 100%; } #push { position: absolute; bottom: 130px; margin: 0 auto; left: 47%; } #pushtext { position: absolute; bottom: 100px; margin: 0 auto; left: 46%; } #pushtext1 { position: absolute; bottom: 150px; margin: 0 auto; left: 46%; }
<header> <div id="logo"><img id="logo1" src="asset/logoblack.png" alt=""></div> <h1> Andrea Lovati </h1> <h2> some text </h2> </header> <!--first section--> <section class="onepage" id="back1"> <div id="pushtext"> <a href="#second"> <h3>discover more</h3> </a> </div> <div id="push"><img src="asset/push.png"></div> </section> <!--second section--> <div id="back2"> </div> <!--third section--> <section id="back3"> </section>
解决方案3
0 2017-03-13 17:44:31
我的图片也遇到了这个问题，所以我要做的就是将img和css文件放在同一资产文件夹中。 然后在HTML上链接CSS，只需输入“”即可。 对于CSS上的背景图片，只需输入“ background-image：your-image.png”。 这就是我为解决这个问题所做的。 为了使图像完全适合该部分，请在每个部分上使用“背景尺寸：封面”。
尝试实现延迟加载“淡入”，但似乎无法正常工作
[英]Trying to implement lazyload 'fade in' but it doesn't seem to work correctly
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.