如何使背景覆盖一个单独的div？ [英] How to make a background cover a separate div?

问题描述

我在做一个带有侧边菜单的网站。 30％的屏幕是菜单，其余的是内容。

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

但是，当图像占据整个背景时，此方法可以很好地工作。

我如何解决这个问题？

HTML：

 < div id =esquerdastyle =width：30 ％; height：500px> 
 .... conteudo ..... 
< / div> 
 
< div id =direitastyle =width：70％; height：500px> 
< img src =fundo.jpgclass =bg> 
 
< / div> 
  

CSS：

 code> .bg {
 min-height：100％; 
 min-width：1024px; 
 
 width：100％; 
 height：auto; 
 
 position：fixed; 
 top：0; 
 float：right; 
} 
 
 
 @media屏幕和（max-width：1024px）{
 .bg {
 left：50％; 
 margin-left：-512px; 
} 
} 
  

解决方案

方法使用 background-image 和3个不同的元素（防止主要与Safari相关的xBrowser问题）

将背景设置为



lang =jsdata-hide =false>

  * -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;位置：固定; top：0; right：0; bottom：0; width：70％;}＃menu {position：fixed; bottom：0; top：0; left：0;宽度：30％; background：rgba（0，0，255，0.4）;}＃page {position：relative; border：10px dotted＃000; margin-left：30％;宽度：70％; height：2000px;}  

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

，您可以随意应用CSS3 媒体查询。

请注意 ：最简单是不是 c> #bg 元素，而是使用 background-attachment：fixed将bg图像直接设置为 #page ; ，但如上所述，图片可能不会出现在Safari上，并且大小设置为 cover 。

I'm doing a site with side-menu. 30% of the screen is the menu and the rest is content.

The contents of the div, I put a background image using the COVER method. I used the first example: https://css-tricks.com/examples/FullPageBackgroundImage/css-1.php

However, this method works perfectly when the image occupies the entire background. As in my example, I want the same exact occupy 70% of the width, "eats" the image corners.

How can I fix this?

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

解决方案

Basic approach using background-image and 3 different elements (to prevent xBrowser issues related mostly to Safari)
setting the background to cover on the #bg layer element

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

on top of that code you can apply CSS3 media queries as you please.

Note that the "easiest" would be not to use the separate #bg element but instead to set the bg image directly to the #page element using background-attachment: fixed; but, as mentioned, the image might not appear on Safari in combination with it's size set to cover.

这篇关于如何使背景覆盖一个单独的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！