HTML – 如何使背景覆盖一个单独的div？

概述我正在做一个带侧边菜单的网站.屏幕的30％是菜单,其余的是内容. div的内容,我使用COVER方法放置背景图像.我用了第一个例子：  https://css-tricks.com/examples/FullPageBackgroundImage/css-1.php 但是,当图像占据整个背景时,此方法可以正常工作.在我的例子中,我想要相同的精确占据宽度的70％,“吃”图像角落. 我怎样才能解决这个 @H_301_6@ 我正在做一个带侧边菜单的网站.屏幕的30％是菜单,其余的是内容.

div的内容,我使用COVER方法放置背景图像.我用了第一个例子：
 https://css-tricks.com/examples/FullPageBackgroundImage/css-1.php

但是,当图像占据整个背景时,此方法可以正常工作.在我的例子中,我想要相同的精确占据宽度的70％,“吃”图像角落.

我怎样才能解决这个问题？

HTML：

<div ID="esquerda" > ....conteudo.....</div><div ID="direita" >   <img src="fundo.jpg" ></div>

CSS：

.bg {    min-height: 100%;    min-wIDth: 1024px;    wIDth: 100%;    height: auto;       position: fixed;    top: 0;    float: right;}@media screen and (max-wIDth: 1024px){     .bg {        left: 50%;        margin-left: -512px;      }}

解决方法 使用背景图像和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,255,0.4 );}#page{  position: relative;  border: 10px dashed #000;  margin-left: 30%;  wIDth: 70%;  height: 2000px;}

<div ID="bg">BG</div><div ID="menu">FIXED</div><div ID="page">SCRolLABLE</div>

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

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

总结

以上是内存溢出为你收集整理的HTML – 如何使背景覆盖一个单独的div？全部内容，希望文章能够帮你解决HTML – 如何使背景覆盖一个单独的div？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。