怎样将php背景照片覆盖,HTML – 如何使背景覆盖一个单独的div？

使用背景图像和3个不同元素的基本方法(防止xBrowser主要与Safari相关的问题)

设置背景以覆盖#bg图层元素

*{ box-sizing: border-box;}

html, body{ height:100%; }

body{ position:static; margin:0; }

#bg{

background: url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg') 50%;

background-size: cover;

position: fixed;

top: 0; right: 0; bottom: 0;

width: 70%;

}

#menu{

position: fixed;

bottom: 0; top: 0; left: 0;

width: 30%;

background: rgba( 0, 0, 255, 0.4 );

}

#page{

position: relative;

border: 10px dashed #000;

margin-left: 30%;

width: 70%;

height: 2000px;

}

BG

FIXED

SCROLLABLE

在该代码之上,您可以随意应用CSS3媒体查询.

请注意,“最简单”不是使用单独的#bg元素,而是使用background-attachment：fixed将bg图像直接设置为#page元素;但是,正如所提到的,图像可能不会出现在Safari上,并且其大小设置为覆盖.