Question

我想制作一个带有全屏图像的目标网页。像这样：http://startbootstrap.com/templates/stylish-portfolio/

我可以弄清楚其下面的其他东西，但是如何让图像覆盖整个屏幕呢？

Answer 1

它是标题标记的背景

如果你去Stylish_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图像的宽度和高度属性。

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

如何制作带有全屏图像的目标网页？

4 个答案: