Question

让我们说我有一个名为container的div，宽度为1000px并与屏幕中心对齐。我想将图片/广告添加到该div左侧和右侧的空白处。它应该是固定的，如果屏幕较小，则不应移动到content div，而应该在放大网站或屏幕较小时消失到两侧。

我正在努力完成probuilds.net的工作：https://i.gyazo.com/746c89429d9ca0e23016469120f2b607.jpg

怎么可能这样呢？每一方都应该有单独的广告/图片代码。

Answer 1

您可以使用background-attachment属性并在css中设置背景图片来执行此操作。这将允许在“内部div”（主体元素）内滚动，同时确保滚动时背景图像不会移动。

html,
body {
  margin: 0;
}
body {
  position: relative;
  width: 80%;
  background: dimgray;
  height: 200vh;
  opacity: 0.8;
  margin-left: 10%;
}
html {
  background: url(http://lorempixel.com/1000/1000);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}

This is some text

相反，如果您希望左右部分有不同的图像，则可以使用伪元素来实现此目的：

html,
body {
  margin: 0;
}
body {
  position: absolute;
  width: 80%;
  background: dimgray;
  height: 200vh;
  left: 10%;
  top: 0;
}
html:before,
html:after {
  content: "";
  position: fixed;
  top: 0;
  width: 10%;
  height: 100%;
}
html:before {
  left: 0;
  background: url(http://lorempixel.com/300/1000);
  background-size: 100% 100%;
}
html:after {
  right: 0;
  background: url(http://lorempixel.com/100/1000);
  background-size: 100% 100%;
}

This is some text

如何将图像/广告添加到主要内容的两侧

1 个答案: