Question

我有以下内容：

<div id="wrapper"></div>

#wrapper {
    position: relative;
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/fabric-bg.png);
    background-repeat: repeat;
    z-index: 2;
    width: 100%;
    height: auto;
}

#wrapper::before {
    content: '';
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/trampology-left-bg.png);
    background-size: contain;
    display: block;
    width: 516px;
    height: 2152px;
    position: absolute;
    left: 0;
}

#wrapper::after {
    content: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/trampology-right-bg.png);
    display: block;
    width: 826px;
    height: 2013px;
    position: absolute;
    right: 0;
    top: 0;
}

JSFIDDLE HERE

有没有办法使用CSS来减少使用::before和::after的左右背景图片的大小？

目前它们保持相同的大小，我希望它们根据浏览器宽度减小尺寸，这是否可以使用CSS而不使用大量媒体查询？如果必须的话，不要介意使用jQuery ......

Answer 1

我认为你要做的是这样的事情：

使用多个背景图像时，第一层/图像是顶层在堆叠顺序中，堆叠顺序中的下一个/第二个图像将显示在下面，因此它继续...最后应用标准背景样式（大小，重复和位置）以与图像相同的顺序添加它们，用逗号分隔每个。

html,body {height: 100%;margin: 0;}
#wrapper {
  position: relative;
  background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/trampology-left-bg.png),
url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/trampology-right-bg.png),
url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/fabric-bg.png);
  background-repeat: no-repeat, no-repeat, repeat; /* 1st, 2nd, 3rd image */
  background-position: top left, top right, center center;
  background-size: 20% 100%, 20% 100%, 300px 222px;
  width: 100%;
  height: 100%;
}

<div id="wrapper"></div>

Answer 2

这样的东西？

See this fiddle

render()

在CSS中设置变量宽度：before和：after元素

2 个答案: