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

我正在做一个侧面菜单的网站。屏幕的30％是菜单，剩下的就是内容。如何使背景覆盖一个单独的div？

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

但是，当图像占据整个背景时，此方法非常有效。就像在我的例子中，我想要占据70％宽度的同一个“吃”图像角落。

我该如何解决这个问题？

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

来源

2015-12-28 Zkk

这是一个奇怪的做法。我宁愿使用CSS-Background（'background-image：url（fundo.jpg）'，如果这对你是好的） – CoderPi

使用background-image和3个不同的元件的基本方法（以防止主要涉及的Safari Xbrowser中的问题）
设置背景到cover所述#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; 
 
}

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

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

注的“最简单”的将是不使用单独#bg元素，而是在背景图片，直接使用background-attachment: fixed;设置为#page元素，但是，如前所述，图像可能不会出现Safari与其尺寸设置为cover。

来源

2015-12-28 19:39:54

我试图使用固定和相对位置进行一些更改，但没有成功。他的例子非常简单，客观和容易理解。谢谢，帮助了很多！ – Zkk

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

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

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

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

来源

2015-12-28 19:36:11

这是一个很好的做法，我需要采取。提示注释。谢谢！ – Zkk

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

来源

2015-12-28 19:46:38

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

回答

相关问题