将按钮居中放在背景图像上

时间：2015-09-24 14:43:34

标签： html css button layout background

我正在尝试在带有背景图像的div（ccontainer）顶部显示“链接按钮”。它适用于一个位置：绝对但有位置：相对它消失。我想知道为什么这就像我希望按钮相对于div。

我的另一个问题是如何让我的“scontent”div在我的“contnent”div之后（下方）。我使背景图像透明，可以看到背后重叠的“scontent”灰色背景颜色。

body
{
	margin: 0; 
	padding: 0;
	background-color: #999;
}

.header 
{ 
	z-index:3;
	position:fixed;
	background-color:#2B193E; 
	border:0px solid #ffffff; 
	height:70px; 
	left:0;  
	width:100%; 
	top:0; 
	/*Opacity start*/
    -ms-filter:             "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.8;
    opacity: 0.7;
    /*Opacity end*/
}

.hcontainer
{  
	position: relative;
	width:100%;
}

.headingtext 
{ 
	color: #ffffff;
	text-align: center;
	width: 100%; 
}

.content
{
	z-index:1;
	position: absolute;
	top:0;
	left:0;
	height: 100%;
	width: 100%;
	padding:0px 0px;
}

.ccontainer
{
	height: 100%;
	width: 100%;
	background:url(my.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	opacity: 0.9;
	background-size: 100% 100%;
}

.scontent
{
	width: 100%;
	height: 2000px;
	padding:0px 0px;
}
.sccontainer
{
	width: 100%;
	height: 100%;
	background-color: #444444;
}

.footer
{
	z-index:2;
	background: #2B193E;
	position: fixed;
	bottom:0;
	height:5em;
	width: 100%;
	padding: 0em 0em;
	/*Opacity start*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.8;
    opacity: 0.7;
    /*Opacity end*/
}

.fcontainer
{
	position:relative;
	color: #fff;
	text-align: center;
	top: 40%;
}

.btn
{
	position: absolute;
	width: 150px;	
  	margin-left:-75px;
  	left: 50%;
  	bottom:200px;
	display: inline-block;
 	padding: 5px;
	color: #ffffff;
	border: 2px solid #fff;
	border-radius: 5px;
	text-align: center;
	outline: none;
	text-decoration: none;
	transition: background-color 0.2s ease-out,
              	color 0.2s ease-out;
}

.btn:hover, .btn:focus, .btn:active {
	background-color: #fff;
	color: #000;
	transition: background-color 0.3s ease-in,
    			color 0.3s ease-in;
}
<body class="body">
  <div class="header">
    <div class="hcontainer">
      <h1 class="headingtext">Poise for victory!</h1>
    </div>
  </div>
  
  <div class="content">
    <div class="ccontainer">
      <a href="http://www.google.com" class="btn"> Submit!</a>
    </div>
  </div>
    
  <div class="scontent">
    <div class="sccontainer"></div>
  </div>

  <footer class="footer">
    <div class="fcontainer"> 
      MADE <em class="calluna">in</em> USA
    </div>
  </footer>
    
</body>

*编辑：以下是一些说明我的意思的图片。左边是我希望如何布局，而右边的那个是现在的样子。第二张图显示了灰色背景如何从背后重叠背景图像。此外，我正在使用z-index来保持页眉和页脚超过2个内容。

http://imgur.com/a/5uHlK

3 个答案:

答案 0 :(得分：0)

绝对位置，侦听第一个父元素，将其位置设置为除＆＃34;静态＆＃34;之外的其他值。

因此，如果你添加一个固定/绝对/相对于包含链接的div的位置，它应该允许你在link元素中使用position absolute来相对于父元素定位它。

另外，如果你在一个元素上使用position relative，而没有设置任何位置值，对于left / top，它对它的行为没有任何作用。

了解更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/position

答案 1 :(得分：0)

这就是你想要的?????

不确定灰色的来源。

如果您想在查看运行代码段后正确点击“完整页面”。它适应它所在的较小尺寸的盒子。

body
{
	margin: 0; 
	padding: 0;
	background-color: red;
}

.header 
{ 
	z-index:3;
	position:fixed;
  
    /*Opacity Being done with RGBA */
	background-color:RGBA(51, 37, 65, 0.7); 
  
	border:0px solid #ffffff; 
	height:70px; 
	left:0;  
	width:100%; 

}

.hcontainer
{  
	position: relative;
	width:100%;
}

.headingtext 
{ 
	color: #ffffff;
	text-align: center;
	width: 100%; 
}

.content
{
	z-index:1;
	position: absolute;
	top:0;
	left:0;
	height: 100%;
	width: 100%;
	padding:0px 0px;
    background-image: url('http://www.liveurlifehere.com/wallpaper/uploads/liveurlifehere-wallpaper1431009496.jpg');
  background-size: 100% 100%;
  
}

.ccontainer
{
	height: 100%;
	width: 100%;
	background:url(my.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	opacity: 0.9;
	background-size: 100% 100%;
}

.scontent
{
	width: 100%;
	height: 2000px;
	padding:0px 0px;
}
.sccontainer
{
	width: 100%;
	height: 100%;
	background-color: #444444;
}

.footer
{
	z-index:2;
	background: #2B193E;
	position: fixed;
	bottom:0;
	height:5em;
	width: 100%;
	padding: 0em 0em;
	/*Opacity start*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.8;
    opacity: 0.7;
    /*Opacity end*/
}

.fcontainer
{
	position:relative;
	color: #fff;
	text-align: center;
	top: 40%;
}

.btn
{
	position: absolute;
	width: 150px;	
  	margin-left:-75px;
  	left: 50%;
  	bottom:200px;
	display: inline-block;
 	padding: 5px;
	color: #ffffff;
	border: 2px solid #fff;
	border-radius: 5px;
	text-align: center;
	outline: none;
	text-decoration: none;
	transition: background-color 0.2s ease-out,
              	color 0.2s ease-out;
  z-index: 1;
}

.btn:hover, .btn:focus, .btn:active {
	background-color: #fff;
	color: #000;
	transition: background-color 0.3s ease-in,
    			color 0.3s ease-in;
}
<body class="body">
  <div class="header">
    <div class="hcontainer">
      <h1 class="headingtext">Poise for victory!</h1>
    </div>
  </div>
  
  <div class="content">
    <div class="ccontainer">
      <a href="http://www.google.com" class="btn"> Submit!</a>
    </div>
  </div>
    
  <div class="scontent">
    <div class="sccontainer"></div>
  </div>

  <footer class="footer">
    <div class="fcontainer"> 
      MADE <em class="calluna">in</em> USA
    </div>
  </footer>
    
</body>

答案 2 :(得分：0)

感谢您的帮助。问题是我对元素的定位。现在我只使用“静态”默认和相对定位。 This网站不仅有助于z-indexing，还有正常的布局。 html保持不变，但css如下所示，以供参考。我还为html和body添加了100％的宽度和高度，这对我有很大帮助。 

html, body {
	height: 100%;
	width: 100%;
	margin: 0; 
	padding: 0;
/*	font: 1em/1.2 "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
*/
}

.header { 
	position:fixed;
	height:5em;   
	width:100%;
	z-index:3; 
	background-color:#2B193E;
	/*Opacity start*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.8;
    opacity: 0.7;
    /*Opacity end*/
}

.hcontainer {  
	height: 100%;
}

.headingtext {  
	position: relative;
	top: .5em;
	text-align: center;
	color: #ffffff;
}

.content {
	height: 100%;
	background:url(http://www.minimit.com/images/picjumbo.com_IMG_6648.jpg) no-repeat center center fixed;
	background-size: 100% 100%;
}

.ccontainer {
	border: 1px dashed #669966;
	position: relative;
	width:40%;
	height:40%;
	left:30%;
	top:50%;
}

.scontent {
	height: 1500px;
	background:url(mypicture.jpg) no-repeat center center fixed;
	opacity: 0.4;
	background-size: 100% 100%;
}

.sccontainer {
	height: 100%;
	width: 100%;
}

.footer {
	position: fixed;
	height:3em;
	width: 100%;
	bottom:0em;
	z-index:2;
	background: #2B193E;
	padding: 0em 0em;
	/*Opacity start*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.8;
    opacity: 0.7;
    /*Opacity end*/
}

.fcontainer {
	position: relative;
	top:1em;
	text-align: center;
	color: #ffffff;
}

/* -----------------------
Single styles
------------------------*/
.infotable {
	position: relative;
	border: 1px dashed #ffffff;
	width: 70%;
	margin-bottom:0px;
	top: 50%;
	left:15%; 
	

}

.btn {
	border: 20px dashed #000000;
	position: relative;
	left:50%;
 	top:-50%;
	width: 150px;	
 	margin-left:-75px;
 	
	display: inline-block;
 	padding: 5px;
	color: #ffffff;
	border: 2px solid #ffffff;
	border-radius: 5px;
	text-align: center;
/*	outline: none;*/
	text-decoration: none;
	transition: background-color 0.2s ease-out,
              	color 0.2s ease-out;
}

.btn:hover, .btn:focus, .btn:active {
	background-color: #fff;
	color: #000;
	transition: background-color 0.3s ease-in,
    			color 0.3s ease-in;
}

相关问题
最新问题