Question

这是HTML代码：http://ideone.com/ExjCnv

@import url('http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
/* Adding !important forces the browser to overwrite the
   default style applied by Bootstrap */
body {
  background: url(img/dark.png); !important;
  position:relative; z-index:-1;
}
#logo {
  text-indent: 500px;
  z-index:9999;
  position:relative;
}
#links { padding-top: 0.7cm }

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8" id="logo">
      <h2>Audhgjhg</h2>
    </div>
    <div class="col-md-4" align="right" id="links">
      <a href="C:\Users\admin\Desktop\Code\I\tp.html">Read</a>
      <a href="#">Write</a>
      <a href="#">Play</a>
      <a href="#">Help</a>    
    </div>
  </div>
  <div class="jumbotron" style="background-color:#666633">
    <h1 align="center">Read books</h1>
    <h4 align="center">Enter a bookname:</h4>
    <div class="form-group">
      <label for="usr"></label>
      <input type="text" class="form-control" id="usr">
    </div>  
  </div>                    
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

第26行的文字：<h2>Audhgjhg</h2>未显示在浏览器中。我尝试设置文本和背景的z-index，但它仍然是隐藏的。请帮忙。

Answer 1

使用的背景dark.png是http://subtlepatterns.com/dark-embroidery/，主要由深灰色#333组成。 Bootstrap将#333指定为文本颜色，并使文本在与背景匹配时不显示。

Answer 2

对不起......首先来自这个

    <style type="text/css">
   body { background: url(img/dark.png); !important; position:relative; z-index:-1; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>
<style>   
   #logo { text-indent: 500px; z-index:9999; position:relative;}
</style>
<style>   
   #links {padding-top: 0.7cm}
</style>

这样做

<style type="text/css">
    //edited
   body { background: url(img/dark.png); !important; position:relative; z-index:-1; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
   #logo { text-indent: 500px; z-index:9999; position:relative;}
   #links {padding-top: 0.7cm}
</style>

我认为它是背景：url(img/dark.png) !important;而不是background: url(img/dark.png); !important;

改变一切应该没问题。它对我有用。

<!DOCTYPE html>
<html lang = "en">
    <head>
    <meta charset = "utf-8">
    <title>A</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style type="text/css">
       body { background: url(http://images.hngn.com/data/images/full/47684/selena-gomez.jpg?w=650); !important; position:relative; z-index:-1; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
       #logo { text-indent: 500px; z-index:9999; position:relative;}
       #links {padding-top: 0.7cm}
     </style>
    </head>

    <body>
        <div class="container-fluid">

            <div class="row">
                <div class="col-md-8" id="logo">
                    <h2>Audhgjhg</h2>
                </div>
                <div class="col-md-4" align="right" id="links">
                    <a href="C:\Users\admin\Desktop\Code\I\tp.html">Read</a>
                    <a href="#">Write</a>
                    <a href="#">Play</a>
                    <a href="#">Help</a>    
                </div>
            </div>
            <div class="jumbotron" style="background-color:#666633">
                <h1 align="center">Read books</h1>
                <h4 align="center">Enter a bookname:</h4>
                <div class="form-group">
                  <label for="usr"></label>
                  <input type="text" class="form-control" id="usr">
                </div>  
            </div>                    
        </div>
    </body>
</html>

隐藏在背景图像HTML背后的文本

2 个答案: