Question

您好我想更改列的背景颜色，如果我使用改变整个背景的tradtional属性！我想要的只是要更改的列背景颜色。

这是我的CSS代码

.multiple_columns-line1{
       text-align: justify;
       column-count: 3;
       column-gap: 45px;
       column-rule-style: double;
       column-rule-width: 10px;
       column-rule-color: darkmagenta;
       background-color: lightgreen;
}

有人能解开这个谜吗？

Answer 1

直到今天，2017年初，我们无法使用列属性，因此对于真正需要它的人来说，这是一个解决方法。

这篇文章Is it possible to target CSS3 columns individually with selectors?可能是重复的，但我决定不这样做，因为下面的解决方案可能是一个有效的答案

.wrapper {
  position: relative;
}
.newspaper {
  column-count: 3;
  text-align: justify;
  column-gap: 45px;
  column-rule-style: double;
  column-rule-width: 10px;
  column-rule-color: darkmagenta;
}
.bgcolor,
.bgcolor::before,
.bgcolor::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: calc(33% - 5px);
  background-color: lightgreen;
  z-index: -1;
}
.bgcolor {
  left: 50%;
  transform: translateX(-50%);
}
.bgcolor::before {
  left: calc(-100% - 15px);
  width: calc(100% - 7px);
}
.bgcolor::after {
  right: calc(-100% - 15px);
  width: calc(100% - 7px);
}

<div class="wrapper">
  <div class="bgcolor"></div>
  <div class="newspaper">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  </div>
</div>

仅更改列的背景颜色

1 个答案: