HTML/CSS,在每一侧获得 2 个背景以使用包装器进行调整

标签 html css

我想在我的网站上有 2 个独立的背景,每边一个,根据屏幕大小进行调整

喜欢ownedcore.com两侧用中间 wrapper 调整

HTML:

<div id="bleft"></div>
<div id="wrapper">a</div>
<div id="bright"></div>

CSS:

@charset "utf-8";

header, section, footer, aside, bside, article, figure {display: block;}
* {margin: 0; padding: 0;}

#wrapper {
    width: 1400px;
    margin: 0 auto;
    text-align: left;
    position: absolute;
}

#bleft {
    width: 700px;
    height: 700px;
    float: left;
    background-image: url(images/pageBGLeft.jpg);
    clear: left;
}
#bright {
    width: 700px;
    height: 700px;
    float: right;
    background-image: url(images/pageBGRight.jpg);
    clear: right;
}

不强制正确的背景,但显示单行包装

最佳答案

该站点看起来像这样在 2 个容器上使用 2 个背景:

<body>
  <div id="A">
    <div id="B">
      <div id="wrapper"></div>
    </div>
  </div>
</body>

然后CSS:

#A {
  background: url(...) top right no-repeat;
}
#B {
  background: url(...) top left no-repeat;
}
#wrapper {
  width: 700px;
  margin: 0 auto;
}

关于HTML/CSS,在每一侧获得 2 个背景以使用包装器进行调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13748450/

相关文章:

javascript - 使用 javascript 或最佳替代方案从存储在数组中的图像 url 下载图像

javascript - 如何将 anchor 标签的单个元素设置为数组图像

html - 跨度应具有子 img 的宽度和高度

php - 服务器从 example.html 重定向到 script.php?url=example

html - Bootstrap 中 .row 的用途是什么?

javascript - 使用 HTML 实体设置元素值

CSS顺序规则问题

html - 如何在 WordPress 中隐藏用户仪表板详细信息?

html - 使用 vertical-align 属性将 div 对齐到 sibling 的顶部和底部(保持 div 相同的高度)

jquery - Safari 不采用添加类的过渡属性