css Gravatar作为全屏背景图像

Posted 2021-05-13

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}

/*_*/

<p>
    Your text goes here...
</p>

/**
 * Gravatar as fullscreen background image
 *
 * http://dabblet.com/gist/dab7cdd9f9fcfd093199/1c0636877b6081af33f698740a720e9d25ece924
 */

body {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%;
    background-color: rgb(186, 21, 21);
    overflow: hidden;
}

body:before {
    content: "";
    position: absolute;
    height: 100%; width: 100%;
    background: url(http://www.gravatar.com/avatar/f8d7c4a4899736c59ec1e40c7021d477?s=1024) no-repeat center center fixed;

    z-index: -1; /* Keep the background behind the content */
    
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
	-webkit-filter: blur(0.45em); 
	-moz-filter: blur(0.45em); 
	-o-filter: blur(0.45em); 
	-ms-filter: blur(0.45em); 
	filter: blur(0.45em);
}
  
p {
    display:none;
}