如何使背景覆蓋一個單獨的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？

回答

相關問題