全屏背景圖像只使用CSS

-1

所以我正在重新設計CSS Zengarden網站。全屏背景圖像只使用CSS

我不允許以任何方式觸摸或更改HTML，因此所有樣式必須僅使用CSS完成（因此我無法創建額外的類或div）。

我試圖創建一個不固定的全屏幕背景圖像，並且覆蓋整個第一部分標記。下面是HTML &我目前的CSS與一些註釋掉的東西。

我能夠使其全屏，但它與其下的其他divs重疊。

這對目前的HTML甚至是一種可能性嗎？

<body id="css-zen-garden"> 
<div class="page-wrapper"> 

    <section class="intro" id="zen-intro"> 
     <header role="banner"> 
      <h1>CSS Zen Garden</h1> 
      <h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2> 
     </header> 

     <div class="summary" id="zen-summary" role="article"> 
      <p>A demonstration of what can be accomplished through <abbr title="Cascading Style Sheets">CSS</abbr>-based design. Select any style sheet from the list to load it into this page.</p> 
      <p>Download the example <a href="/examples/index" title="This page's source HTML code, not to be modified.">html file</a> and <a href="/examples/style.css" title="This page's sample CSS, the file you may modify.">css file</a></p> 
     </div> 

     <div class="preamble" id="zen-preamble" role="article"> 
      <h3>The Road to Enlightenment</h3> 
      <p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <abbr title="Document Object Model">DOM</abbr>s, broken <abbr title="Cascading Style Sheets">CSS</abbr> support, and abandoned browsers.</p> 
      <p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <abbr title="World Wide Web Consortium">W3C</abbr>, <abbr title="Web Standards Project">WaSP</abbr>, and the major browser creators.</p> 
      <p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p> 
     </div> 
    </section> 

    <div class="main-supporting" id="zen-supporting" role="main"> 
     <div class="explanation" id="zen-explanation" role="article"> 
      <h3>So What is This About?</h3> 
      <p>There is a continuing need to show the power of <abbr title="Cascading Style Sheets">CSS</abbr>. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The <abbr title="HyperText Markup Language">HTML</abbr> remains the same, the only thing that has changed is the external <abbr title="Cascading Style Sheets">CSS</abbr> file. Yes, really.</p> 
      <p><abbr title="Cascading Style Sheets">CSS</abbr> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. Designers and coders alike have contributed to the beauty of the web; we can always push it further.</p> 
     </div>

這是在CSS我有個大氣壓，是有可能把它變成這樣（圖像）：http://www.bucketlistly.com/？

.intro { 
    position: ; 
    background-image: url(mountain-zengarden.jpg); 
    width: 100%; 
    height: 100%; 
    max-width: 100%; 
}

來源

2015-11-08 Edson

通過這個偉大的教程

https://www.youtube.com/watch?v=hExwnLlj2xk

我意識到，我是不知道的事實，要知道家長的div的

高度是很重要的幫助。因此，爲了獲得部分容器，以填補

整個頁面，我首先必須父容器的（HTML，身體和外

格）高度設置爲100％，然後最後的工作。感謝您的幫助！

來源

2015-11-08 08:20:20 Edson

只是嘗試添加：

body { 
    margin:0; 
} 

.intro { 
    width: 100%; 
    height: 100%; 
    max-width: 100%; 
}

然後你就可以修改高度。所以你可以製作一個整頁div。

來源

2015-11-08 00:45:09 Nvan

並離開CSS的其餘部分是一樣的嗎？ .intro類的定位如何？ – Edson

你有你想要的結果的例子嗎？ – Nvan

http://www.bucketlistly.com/ – Edson

全屏背景圖像只使用CSS

回答

相關問題