顶部的背景图像元素
Background image elements on top
我被分配了创建 404.php 错误页面的任务。我刚刚开始学习一切,这项任务非常困难。到目前为止,我已经成功了:
- 设置github+原子
- 克隆包含一些代码的存储库
- 设置 MAMP + Wordpress 并使数据库正常工作
- 试图组织所有术语并尽量不混淆它们
距离我从头开始几乎所有事情都只有 4 天了。
我设法将此代码放入 404.php:
> <?php
/**
* The template for displaying 404 pages (Not Found).
**/
get_header(); ?>
<div id="bg">
<img src="<?php echo get_bloginfo('template_directory'); ?> \img\Free-Chalkboard-Backgrounds.jpg" alt="background">
</div>
<header class="entry-header">
<center>
<h1 class="entry-title">404 - Not found</h1>
</center>
</header>
<article id="post-0" class="post error404 no-results not-found">
<div class="entry-content">
<p><big>404 - Die Seite konnte nicht gefunden werden.</big></p>
<?php get_search_form(); ?>
<!-- <img class="img-responsive" src="<?php echo $logoUrl; ?>" alt="Logo - <?php echo get_bloginfo('name'); ?>"> -->
<center><img src="<?php echo get_bloginfo('template_directory'); ?> \img\internet-error-404-file-not-found.jpg" alt="404 not-found" />
</center>
</div>
<!-- .entry-content -->
</article>
<!-- #post-0 -->
<footer>
<ul class="list-inline Impressum">
<li> <a href="https://www.th-nuernberg.de/seitenbaum/impressum/page.html" target="blank">
<alt=>Impressum</a> </li>
<li> |
</li>
<li> <a href="https://www.th-nuernberg.de/institutionen/hochschulkommunikation/ohm-shop/agb/page.html" target="blank">
<alt=>AGB</a> </li>
<li> |
</li>
<li> <a href="https://www.th-nuernberg.de/institutionen/language-center/ueber-uns/page.html" target="blank">
<alt=>Über uns</a> </li>
</ul>
</footer>
<?php get_footer(); ?>
这是 css:
#bg {
position: fixed;
top: -64%;
left: -55%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 55%;
min-height: 55%;
}
在本地主机页面上看起来像这样:
preview of 404
如何让其他元素位于背景之上?我读了几个答案,但我现在很困惑,我需要一个针对我的案例的具体提示。
在此先感谢您的帮助!
试一次...
<?php
/**
* The template for displaying 404 pages (Not Found).
**/
get_header(); ?>
<div id="bg">
<img src="<?php echo get_bloginfo('template_directory'); ?> \img\Free-Chalkboard-Backgrounds.jpg" alt="background">
</div>
<header class="entry-header">
<center>
<h1 class="entry-title">404 - Not found</h1>
</center>
</header>
<article id="post-0" class="post error404 no-results not-found">
<div class="entry-content">
<p><big>404 - Die Seite konnte nicht gefunden werden.</big></p>
<?php get_search_form(); ?>
<!-- <img class="img-responsive" src="<?php echo $logoUrl; ?>" alt="Logo - <?php echo get_bloginfo('name'); ?>"> -->
<center><img src="<?php echo get_bloginfo('template_directory'); ?> \img\internet-error-404-file-not-found.jpg" alt="404 not-found" />
</center>
</div>
<!-- .entry-content -->
</article>
<!-- #post-0 -->
<footer>
<ul class="list-inline Impressum">
<li> <a href="https://www.th-nuernberg.de/seitenbaum/impressum/page.html" target="blank">
<alt=>Impressum</a> </li>
<li> |
</li>
<li> <a href="https://www.th-nuernberg.de/institutionen/hochschulkommunikation/ohm-shop/agb/page.html" target="blank">
<alt=>AGB</a> </li>
<li> |
</li>
<li> <a href="https://www.th-nuernberg.de/institutionen/language-center/ueber-uns/page.html" target="blank">
<alt=>Über uns</a> </li>
</ul>
</footer>
<?php get_footer(); ?>
CSS
.bg-img {
background-position: right 45px bottom;
}
#bg {
position: fixed;
top: -64%;
background-position: top center;
left: -55%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
background-position: top center;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 55%;
min-height: 55%;
}
那么,如果我对你的理解正确的话,你的背景现在重叠了?
我认为您要搜索的 属性 称为 z-index。
您可能需要做类似
的事情
#bg{
z-index: -1;
}
我被分配了创建 404.php 错误页面的任务。我刚刚开始学习一切,这项任务非常困难。到目前为止,我已经成功了:
- 设置github+原子
- 克隆包含一些代码的存储库
- 设置 MAMP + Wordpress 并使数据库正常工作
- 试图组织所有术语并尽量不混淆它们
距离我从头开始几乎所有事情都只有 4 天了。
我设法将此代码放入 404.php:
> <?php
/**
* The template for displaying 404 pages (Not Found).
**/
get_header(); ?>
<div id="bg">
<img src="<?php echo get_bloginfo('template_directory'); ?> \img\Free-Chalkboard-Backgrounds.jpg" alt="background">
</div>
<header class="entry-header">
<center>
<h1 class="entry-title">404 - Not found</h1>
</center>
</header>
<article id="post-0" class="post error404 no-results not-found">
<div class="entry-content">
<p><big>404 - Die Seite konnte nicht gefunden werden.</big></p>
<?php get_search_form(); ?>
<!-- <img class="img-responsive" src="<?php echo $logoUrl; ?>" alt="Logo - <?php echo get_bloginfo('name'); ?>"> -->
<center><img src="<?php echo get_bloginfo('template_directory'); ?> \img\internet-error-404-file-not-found.jpg" alt="404 not-found" />
</center>
</div>
<!-- .entry-content -->
</article>
<!-- #post-0 -->
<footer>
<ul class="list-inline Impressum">
<li> <a href="https://www.th-nuernberg.de/seitenbaum/impressum/page.html" target="blank">
<alt=>Impressum</a> </li>
<li> |
</li>
<li> <a href="https://www.th-nuernberg.de/institutionen/hochschulkommunikation/ohm-shop/agb/page.html" target="blank">
<alt=>AGB</a> </li>
<li> |
</li>
<li> <a href="https://www.th-nuernberg.de/institutionen/language-center/ueber-uns/page.html" target="blank">
<alt=>Über uns</a> </li>
</ul>
</footer>
<?php get_footer(); ?>
这是 css:
#bg {
position: fixed;
top: -64%;
left: -55%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 55%;
min-height: 55%;
}
在本地主机页面上看起来像这样:
preview of 404
如何让其他元素位于背景之上?我读了几个答案,但我现在很困惑,我需要一个针对我的案例的具体提示。 在此先感谢您的帮助!
试一次...
<?php
/**
* The template for displaying 404 pages (Not Found).
**/
get_header(); ?>
<div id="bg">
<img src="<?php echo get_bloginfo('template_directory'); ?> \img\Free-Chalkboard-Backgrounds.jpg" alt="background">
</div>
<header class="entry-header">
<center>
<h1 class="entry-title">404 - Not found</h1>
</center>
</header>
<article id="post-0" class="post error404 no-results not-found">
<div class="entry-content">
<p><big>404 - Die Seite konnte nicht gefunden werden.</big></p>
<?php get_search_form(); ?>
<!-- <img class="img-responsive" src="<?php echo $logoUrl; ?>" alt="Logo - <?php echo get_bloginfo('name'); ?>"> -->
<center><img src="<?php echo get_bloginfo('template_directory'); ?> \img\internet-error-404-file-not-found.jpg" alt="404 not-found" />
</center>
</div>
<!-- .entry-content -->
</article>
<!-- #post-0 -->
<footer>
<ul class="list-inline Impressum">
<li> <a href="https://www.th-nuernberg.de/seitenbaum/impressum/page.html" target="blank">
<alt=>Impressum</a> </li>
<li> |
</li>
<li> <a href="https://www.th-nuernberg.de/institutionen/hochschulkommunikation/ohm-shop/agb/page.html" target="blank">
<alt=>AGB</a> </li>
<li> |
</li>
<li> <a href="https://www.th-nuernberg.de/institutionen/language-center/ueber-uns/page.html" target="blank">
<alt=>Über uns</a> </li>
</ul>
</footer>
<?php get_footer(); ?>
CSS
.bg-img {
background-position: right 45px bottom;
}
#bg {
position: fixed;
top: -64%;
background-position: top center;
left: -55%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
background-position: top center;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 55%;
min-height: 55%;
}
那么,如果我对你的理解正确的话,你的背景现在重叠了? 我认为您要搜索的 属性 称为 z-index。
您可能需要做类似
的事情 #bg{
z-index: -1;
}