如何制作具有全屏图像的登录页面？

Question

我想制作一个全屏图像的登录页面。 像这样： http : //startbootstrap.com/templates/stylish-portfolio/

我可以找出它下面的其余内容，但是如何使图像覆盖整个屏幕呢？

Answer 1

它是标题标签的背景

如果您转到fashion_portfolio.css中的第153至163行

.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(../img/bg.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;}

backgorund-size是使之覆盖所有屏幕W3C的技巧

- -编辑

高度和宽度应为100％，以使图片适合所有媒体上的整个屏幕。

Answer 2

您应该拍摄大尺寸的图像。 然后

你的HTML看起来像

    <html>
      <head>
         <title>Landing Page</title>
      </head>
      <body>
         <div class="landingbg">&nbsp;</div>
      </body>
  </html>

然后CSS将是

.landingbg{
          background: url("img/bg.jpg") no-repeat scroll center center / cover     rgba(0, 0, 0, 0);
display: block;
height: 100%;
position: relative;
width: 100%;
     }

试试这个，告诉我是否有问题

Answer 3

您可能需要大的高清图像作为背景。

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

有关更多详细信息： http : //css-tricks.com/perfect-full-page-background-image/

Answer 4

具有JQuery功能以获取最终用户屏幕的宽度和高度。

var jQueryWidth = $( window ).width();
var jQueryHeight = $( window ).height();

完成此操作后，设置HTML图像的width和height属性。

<img src="yourImage.jpg" alt="Alternate text" height="<jQueryWidth>" width="<jQueryHeight>">

如何制作具有全屏图像的登录页面？

问题描述

4 个解决方案

解决方案1
1 2014-07-25 04:24:26

解决方案2
-1 2014-07-25 04:25:14

解决方案3
-1 2014-07-25 05:05:43

解决方案4
-2 2014-07-25 04:21:11

如何制作具有全屏图像的登录页面？

问题描述

4 个解决方案

解决方案1 1 2014-07-25 04:24:26

解决方案2 -1 2014-07-25 04:25:14

解决方案3 -1 2014-07-25 05:05:43

解决方案4 -2 2014-07-25 04:21:11

解决方案1
1 2014-07-25 04:24:26

解决方案2
-1 2014-07-25 04:25:14

解决方案3
-1 2014-07-25 05:05:43

解决方案4
-2 2014-07-25 04:21:11