Question

我有一个全屏幕背景图像，我想使用引导网格将div放在页面中心，而不与背景交互。

这是我的HTML：

＆＃13;

iex> guessed = "_a__a_"
iex> letter = "r" 
iex> [[{idx, _}]] = Regex.scan ~r/#{letter}/, word, return: :index
[[{2, 1}]]

iex> String.slice(guessed, 0..idx-1) <> 
...>     letter <> 
...>     String.slice(guessed, idx+1..String.length(guessed))
"_ar_a_"

＆＃13;

    .full{
        background: url('http://whd.erth.biz/wp-content/uploads/mixed2/office-relax-clean-ping-pong-1920x1080.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        z-index:-10;
    }
    .frameHolder {
        margin-top:5%;
        height:500px;
        position:absolute;
    }
    
    .quizFrame{
        position:absolute;
        height:500px;
        width:100%;
    }
    
    .quizFrame1{
        background-color:white;
        z-index:10;
    
    }

＆＃13;

无论我对frameholder / quizFrame（相对/绝对）应用什么定位，我总是以不居中的内容结束。但是没有背景图像一切正常。

如何使用网格正确居中我的div和位置元素而不与背景图像进行任何交互？

Answer 1

您的代码中存在错误。您不会将样式应用于HTML标记。您可以使用body标签将样式应用于页面。这应该适合你。我已经标记了我所做的更改。

＆＃13;

body{ /* Changed the tag */
    background: url('http://whd.erth.biz/wp-content/uploads/mixed2/office-relax-clean-ping-pong-1920x1080.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index:-10;
}
.frameHolder {
    margin-top:5%;
    height:500px;
    position:absolute;
}

.quizFrame{
    position:absolute;
    height:500px;
    width:100%;
}

.quizFrame1{
    background-color:white;
    z-index:10;

}

＆＃13;

<html lang="en"> <!-- CAHNGE -->
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="style.css" type="text/css">
     </head>
	<div class="container"> <!-- CAHNGE -->
		<div class = "row">
			<div class = "col-md-3"></div>
			<div class = "col-md-6 frameHolder">
				<div id="frame1" class = "quizFrame quizFrame1">
					<p>Click Start Game below to begin the quiz</p>
					<button onclick="Run();">Start Game</button>
				</div>
			</div>
			<div class = "col-md-3"></div>
		</div>
	</div> <!-- CAHNGE -->
</html>

＆＃13;

Answer 2

<div class="col-md-4 offset-col-md4 text-center"></div>

中心列，中心内容，就这么简单。

如何使用引导网格将div放在全屏背景图像上

2 个答案: