Question

我写了一小段代码（真的试图不要骄傲自大）实现了改变三种类型过滤的漂亮背景。这是html：

<!doctype html>
<html>
<!-- Head -->
<head>
    <title>html_three_vertical_div_backgrounds</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />   

    <!-- Area for Additional Links -->
    <link rel='stylesheet' type='text/css' href='html_three_vertical_div_backgrounds.css' />
</head>

<!-- Body -->
<body>
    <div id='left'></div>
    <div id='middle'></div>
    <div id='right'></div>
</body>

...和CSS：

#left {
/* Set the float (left) */
float: left;
/* Set the width */
width: 33%;
/* Set the height */
height: 100vh;
/* Filter */
-webkit-filter: grayscale(1);
/* We actually have to post the image all three times */
background-image: url("http://images2.fanpop.com/image/photos/9800000/Great-Mountains-mountains-and-waterfalls-9842020-1920-1440.jpg");
background-attachment: fixed;
background-size: cover;
}

#middle {
float: left;
width: 34%;
height: 100vh;
-webkit-filter: sepia(1);
background-image: url("http://images2.fanpop.com/image/photos/9800000/Great-Mountains-mountains-and-waterfalls-9842020-1920-1440.jpg");
background-attachment: fixed;
background-size: cover;
}

#right {
float: left;
width: 33%;
height: 100vh;
-webkit-filter: contrast(3);
background-image: url("http://images2.fanpop.com/image/photos/9800000/Great-Mountains-mountains-and-waterfalls-9842020-1920-1440.jpg");
background-attachment: fixed;
background-size: cover;
}

body {
margin:0;
padding:0;
}

这就是最后的样子：

Three divs with filters for backgrounds

但我觉得我有更好的方法可以实现这一点。有关如何以更好/更有效的方式完成此任务的任何建议？

Answer 1

您的HTML效果与预期一样有效。也就是说，通过删除常用属性并将它们放在另一个CSS标记中，可以使CSS变得更紧凑。然后你会得到这样的东西

#left, #middle, #right {
  float:left;
  width:-webkit-calc(100% / 3);/*Makes the width exactly a third of the screen*/
  height:100vh;
  background-image: url("http://images2.fanpop.com/image/photos/9800000/Great-Mountains-mountains-and-waterfalls-9842020-1920-1440.jpg");
  background-attachment: fixed;
  background-size: cover;
}
#left {
  -webkit-filter: grayscale(1);
}
#middle {
  -webkit-filter: sepia(1);
}
#right {
  -webkit-filter: contrast(3);
}
body {
  margin:0;
  padding:0;
}

更强大的HTML / CSS代码

1 个答案: