Question

我正在制作一个带侧边菜单的网站。屏幕的30％是菜单，其余的都是内容。

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

但是，当图像占据整个背景时，此方法可以正常工作。在我的例子中，我想要相同的精确度占据宽度的70％，＆＃34;吃掉＆＃34;图像角落。

我该如何解决这个问题？

HTML：

<div id="esquerda" style="width: 30%; height: 500px">
 ....conteudo.....
</div>

<div id="direita" style="width: 70%; height: 500px">
   <img src="fundo.jpg" class="bg">

</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; 
     }
}

Answer 1

使用background-image和3个不同元素的基本方法（防止xBrowser主要与Safari相关的问题）
将背景设置为cover图层元素

上的#bg

＆＃13;

*{ 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;
}

＆＃13;

<div id="bg">BG</div>
<div id="menu">FIXED</div>
<div id="page">SCROLLABLE</div>

＆＃13;

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

注意表示＆＃34;最简单＆＃34;将不使用单独的#bg元素，而是使用#page将bg图像直接设置为background-attachment: fixed;元素，但如上所述，图像可能不会出现在Safari上并且其大小设置为cover。

Answer 2

在CSS中使用background-image属性。您可以创建一个单独的类，以便在仅具有该属性的CSS中使用。

.bgImage {
    background-image: url("fundo.jpg");
}

然后将该类应用于<div>标记。

<div id="direita" class="bgImage" style="width: 70%; height: 500px">
   ...    
</div>

Answer 3

让我们以简单的方式去做 - 在div的风格上使用CSS background-image: url("fundo.jpg");。

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

3 个答案: