Question

我正在创建一个页面打桩网页，其中此部分的背景颜色是通过CSS设置的渐变。我为这一部分的底部创建了一个灰色的div，但我正在努力的是将3个按钮重叠在灰色和橙色上。这部分是如何完成的？

也可以在底部没有页面的页脚的情况下制作灰色栏？我只想让它在本节中可见，而不是其他人可见。

我希望它看起来像这样的预览：

Answer 1

使用一个div作为容器，两个内部divs表示上部和下部（橙色和灰色），最后一个table，绝对位于容器{{1}中}按钮如何在容器内同等居中。

div

.cnt
{
    position:relative;
    width:100%;
    box-sizing:border-box;
    display:block;
    height:250px;
}
.div1
{
    width:100%;
    height:50%;
    background-color:orange;
    display:block;
}
.div2
{
   position:relative;
    width:100%;
    height:50%;
    background-color:gray;
    display:block;
}
.divC
{
    position:absolute;
    top:0;left:0;width:100%;height:100%;
    background-color:transparent;
}
.divC td {text-align:center;vertical-align:middle;}

.btn
{
    height:150px;
    width:150px;
    border-radius:75px;
    background-color:red;
    display:inline-block;
    border:solid 1px red;
    cursor:pointer;
}

更改容器的<div class="cnt"> <div class="div1"></div> <div class="div2"></div> <table cellpadding="0" cellspacing="0" class="divC"> <tr> <td><input type="button" class="btn" value="Button1"></td> <td><input type="button" class="btn" value="Button2"></td> <td><input type="button" class="btn" value="Button3"></td> </tr> </table> </div>和height尺寸（buttons和width，以及height的1/2，以获得带圆圈的按钮。）< / p>

更新：

fiddle 示例仅使用一个border-radius（橙色和灰色，无渐变色）和一个div table。对同样的结果只做了很少的改变。

Answer 2

您不需要2个div，您可以使用线性渐变将多种颜色应用于一个div。

		div{
			height: 160px;
			text-align: center;
			line-height: 160px;
			background-image: linear-gradient(orange 50%, gray 50%);
		}
		button{
			border-radius: 80px;
			height: 150px;
			width: 150px;
			margin-right: 5%;
			border: none;
			box-shadow: inset 0 0 10px 1px black; 
		}
		div button:last-child{
			margin-right: 0;
		}

	<div>
		<button>Button 1</button>
		<button>Button 2</button>
		<button>Button 3</button>
	</div>

Answer 3

似乎不同的背景颜色不应该作为不同的div放置，而是放在一起作为一个div的背景。这样，您可以使用padding将按钮放在距离顶部/底部适当的距离，并使它们在正确的位置与背景重叠。

示例：

    <html>

     <head>
      <style type="text/css">
        .css3gradient {
            width: 300px;
            height: 100px;
            background-color: #FFA500;
            filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FFA500, endColorstr=#000000);
            background-image: -moz-linear-gradient(top, #FFA500 0%, #000000 100%);
            background-image: -webkit-linear-gradient(top, #FFA500 0%, #000000 100%);
            background-image: -ms-linear-gradient(top, #FFA500 0%, #000000 100%);
            background-image: linear-gradient(top, #FFA500 0%, #000000 100%);
            background-image: -o-linear-gradient(top, #FFA500 0%, #000000 100%);
            background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #FFA500), color-stop(100%, #000000));
         }
        .overlap
        {
          color:White;
          padding-top:40px;
	      padding-bottom:30px;
	      padding-left:10px;
	      padding-right:10px;
        }
	    h1
	    {
	     font-size:180%; /* adding it to demonstrate how you can overlap the middle, this looks well with the current height & width */
	    }
      </style>
     </head>

     <body>
      <div class="css3gradient"><b><h1 class="overlap">Here is the result</h1></b>
      </div>
     </body>

    </html>

在2个div容器的顶部创建按钮

3 个答案: