Back

完全用CSS写的网页谷歌图片

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2015 by anonymous (http://jsbin.com/poqopumiju/1/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<title>JS Bin</title>

<style id="jsbin-css">
body {
overflow: hidden;
isolation: isolate;
}

.image {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
mix-blend-mode: multiply;
background-image: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
background-repeat: no-repeat;
background-position: center;
background-blend-mode: screen;
-webkit-mask-image: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
-moz-mask-image: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
mask-image: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
-webkit-mask-repeat: no-repeat;
-moz-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
-moz-mask-position: center;
mask-position: center;
}

.image.left {
background-color: #0ff;
}

.image.right {
background-color: #ff0;
}

.image.center {
background-color: #f0f;
}

.image.left {
transform: translateX(-2px);
}

.image.right {
transform: translateX(2px);
}
</style>
</head>
<body>
<div class="image left"></div>
<div class="image right"></div>
<div class="image center"></div>
</body>
</html>

 

源自 http://output.jsbin.com/poqopumiju/1/quiet  挂代理看看

Submit
    空樱酱
    空樱酱  2015-09-07, 17:24

    英文引号全部变中文了,建议你修改下主题的functions.php

    Thiece
    Thiece  2015-10-05, 00:05

    背景已经严重影响到内容了

      admin
      admin  2015-10-07, 20:56

      背景突出对吧

    小幻
    小幻  2015-11-14, 01:00

    好屌好屌