Html 将按钮置于下一行和中间位置。将背景图像保持为全尺寸_Html_Css_Twitter Bootstrap

Html 将按钮置于下一行和中间位置。将背景图像保持为全尺寸

html css twitter-bootstrap

Html 将按钮置于下一行和中间位置。将背景图像保持为全尺寸,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,.home{ 背景图像：url（“https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg"); 背景重复：无重复；高度：100vh；显示器：flex；对齐项目：居中；证明内容：中心； } .英雄文本{ 字体大小：32px； } .btn英雄{ 位置：相对位置；字体大小：20px；背景：透明；边框：2px实心#282828；边界半径：28px；填充：10px 30px； } 一切都

.home{
背景图像：url（“https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg");
背景重复：无重复；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.英雄文本{
字体大小：32px；
}
.btn英雄{
位置：相对位置；
字体大小：20px；
背景：透明；
边框：2px实心#282828；
边界半径：28px；
填充：10px 30px；
}


一切都从你的网站开始
立即创建

.home{
位置：相对位置；
背景图像：url（“https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg");
大小：封面；
背景重复：无重复；
高度：100vh；
对齐项目：居中；
证明内容：中心；
背景尺寸：封面；
}
.英雄文本{
字体大小：32px；
}
.btn英雄{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体大小：20px；
背景：透明；
边框：2px实心#282828；
边界半径：28px；
填充：10px 30px；
}


一切都从你的网站开始
立即创建

使用以下代码：

   <!DOCTYPE html>
<html>
  <head>
    <style>
      .home{
        background-image:url("https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width:100%;
        height:500px;
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: -15px 0px;
      }
      .hero-text{
        font-size:32px;
      }

      .btn-hero{
        position:relative;
        font-size:20px;
        background:transparent;
        border:2px solid #282828;
        border-radius:28px;
        padding:10px 30px;
        z-index: 999;
        color:white;
      }
      body{margin: 0px;}
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <div class="home">
        <h1 class="hero-text">Everything Starts with Your Awesome Website</h1>
     </div>
      <div style="text-align: center;margin-top: -150px;">
        <button type="button" class="btn btn-hero">Create Now</button>
      </div> 
    </div>
</body>
</html>


.家{
背景图像：url（“https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg");
背景重复：无重复；
背景大小：100%100%；
宽度：100%；
高度：500px；
最大宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
利润率：-15px 0px；
}
.英雄文本{
字体大小：32px；
}
.btn英雄{
位置：相对位置；
字体大小：20px；
背景：透明；
边框：2px实心#282828；
边界半径：28px；
填充：10px 30px；
z指数：999；
颜色：白色；
}
正文{margin:0px；}
一切都从你的网站开始
立即创建

只需将弹性方向：列添加到.home，并将文本对齐：居中添加到.hero文本即可。添加背景尺寸：封面到。主页填充背景

.home{
背景图像：url（“https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg");
背景重复：无重复；
背景尺寸：封面；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
}
.英雄文本{
字体大小：32px；
文本对齐：居中；
}
.btn英雄{
字体大小：20px；
背景：透明；
边框：2px实心#282828；
边界半径：28px；
填充：10px 30px；
}


一切都从你的网站开始
立即创建

这样可以吗

.home{
位置：相对位置；
背景图像：url（“https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg");
大小：封面；
背景重复：无重复；
高度：100vh；
对齐项目：居中；
证明内容：中心；
背景尺寸：封面；
}
.英雄文本{
位置：绝对位置；
最高：25%；
左：50%；
转换：翻译（-50%，-50%）；
字体大小：32px；
背景：透明；
填充：0px 0px；
}
.btn英雄{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体大小：20px；
背景：透明；
边框：2px实心#282828；
边界半径：28px；
填充：10px 30px；
}


一切都从你的网站开始
立即创建
“图像应该覆盖文本吗？”KiangPurBy认为这是主页，文本和按钮必须出现在图像上。与此主页类似：按钮必须位于文本的正下方。但这会破坏形象。文本和按钮都必须位于图像上方并居中。按钮居中。但是我需要文本和按钮都在中间。与此主页类似：wix.com