图像并排css,在图像上并排应用三个CSS过滤器？

4 个答案:

答案 0 :(得分：6)

编辑：我看到有人已经发布了一个答案，但是我发布了一个答案，因为我做的有点不同。

如果要将它们正确分开，则需要将其拆分为每个过滤器的不同元素。您还需要让每个元素都有自己的背景设置，以便过滤器可以应用到图像的各个部分，并且您需要相应地设置位置(您不必担心关于请求，因为它只会请求一次背景图像)。

同样，你的第一部分不是1/3的原因是因为当技术上1/3是33.33％(当然重复)时你将它设置为30％。

＆＃13;

＆＃13;

.container {

position: relative;

width: 900px;

height: 300px;

}

.filter-section {

float: left;

width: 33.333333333%;

height: 100%;

background: url(http://lorempixel.com/900/300) no-repeat;

}

.grayscale {

-webkit-filter: grayscale(1);

filter: grayscale(1);

background-position: left;

}

.sepia {

-webkit-filter: sepia(1);

filter: sepia(1);

background-position: center;

}

.contrast {

-webkit-filter: contrast(200%);

filter: contrast(200%);

background-position: right;

}＆＃13;

答案 1 :(得分：2)

body {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

background: url(http://lorempixel.com/900/300) no-repeat center center fixed;

-webkit-filter: contrast(1);

filter: contrast(1);

}

body:before {

right: 0;

top: 0;

content: "";

position: fixed;

height: 100%;

width: 33%;

background: url(http://lorempixel.com/900/300) no-repeat right center fixed;

-webkit-filter: sepia(1);

filter: sepia(1);

}

body:after {

left: 0;

top: 0;

content: "";

position: fixed;

height: 100%;

width: 33%;

background: url(http://lorempixel.com/900/300) no-repeat left center fixed;

-webkit-filter: grayscale(1);

filter: grayscale(1);

}

或此宽度重复背景：

答案 2 :(得分：2)

另一种方法是使用混合模式而不是过滤器。

这样，您在设置布局时具有更大的灵活性(例如，您可以将图像设置为具有大小的背景：封面)

您只需要知道这些过滤器的混合模式等价物

.base {

position: absolute;

left: 0px;

top: 0px;

width: 600px;

height: 300px;

background-image: url(http://lorempixel.com/400/200);

background-size: cover;

}

.filter {

position: absolute;

left: 0px;

top: 0px;

width: 600px;

height: 300px;

}

.filter div {

width: calc(100% / 3);

height: 100%;

position: absolute;

top: 0px;

}

.gray {

background-color: gray;

mix-blend-mode: color;

left: 0px;

}

.sepia {

background-color: rgb(112, 66, 20);

mix-blend-mode: color;

left: calc(100% / 3);

}

.contrast {

background-color: hsl(128,100%,50%);

mix-blend-mode: saturation;

left: calc(200% / 3);

}

答案 3 :(得分：0)

我看到有人已经回复了，但我认为如果你让它负责，效果会更好。为此，添加以下HTML

和CSS

.container {

height: 300px;

max-width: 900px;

margin: 100px 0 0 0;

position: relative;

width: 100%;

}

.wrapper {

height: 300px;

float: left;

max-width: 900px;

overflow: hidden;

position: relative;

width: 33.3%;

}

.picture {

background-image: url(http://lorempixel.com/900/300);

background-repeat: no-repeat;

background-size: 900px;

background-position: left 100px;

background-attachment: fixed;

height: 300px;

left: 0;

position: absolute;

top: 0;

width: 900px;

}

.grayscale .picture {

-webkit-filter: grayscale(1);

filter: grayscale(1);

}

.picture.original {

}

.sepia .picture {

-webkit-filter: sepia(1);

filter: sepia(1);

}

主要技巧是使用css属性来修复背景。

background-attachment: fixed;