0

デザインに Twitter Bootstrap を使用して、JSF にプロジェクトがあります。これはメインページの私のコードです:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>MarketPlace</title>
        <link href="./resources/dist/css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <link href="./resources/dist/css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
   <link href="./resources/dist/css/signin.css" rel="stylesheet" type="text/css"></link>
    </h:head>
    <h:body>
        <div class="container">
            <div class="jumbotron">
                    <div class="container">
                        <h1>Welcome to Hamazón!</h1>
                        <p>Register down below, or enter with your credentials.</p>
                    </div>
                </div>
            <h:form class="form-signin">
                Username:<h:inputText class="form-control" value="#{accountManager.username}"/>
                Password:<h:inputSecret class="form-control" value="#{accountManager.password}"/>
                <h:commandButton class="btn btn-lg btn-primary btn-block" value="Login" action="#{accountManager.login}"/>
                <h:commandButton class="btn btn-lg btn-primary btn-block" value="Register" action="#{accountManager.register}"/>
                <h:outputText rendered="#{accountManager.availableMessages}" value="#{accountManager.message}"/>

      </h:form>
    </div>
    </h:body>
</html>

背景として配置したい画像がありますが、divまたは他の要素によってカットされているように見えます。ここに実際の問題へのリンクがあります

私の CSS スタイルシートは、Bootstrap で使用されるものであり、この記事で推奨されたこのコードはこちらです。css スタイルシート全体は次のとおりです。

html { 
  background: url(marketbg.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  font-size: 16px;
  height: auto;
  padding: 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="text"] {
  margin-bottom: -1px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

この問題を解決するためのその他の情報は、喜んで提供させていただきます。

4

2 に答える 2

1

こんにちは、html のバックグラウンドは正常に動作しているようですが、一部の要素にはバックグラウンド プロパティも含まれている可能性があります。これをcssファイルに入れてみてください：

body, .container {
background
background:none !important;
}
于 2013-10-16T16:07:18.300 に答える