HTML5 CSS3响应式全屏背景图居中标题布局模板

Responsive Header Layout

html5, 模板，header, center

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 8218
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    overflow: hidden;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}
html {
    background-image: url(https://unsplash.imgix.net/photo-1423683249427-8ca22bd873e0?fit=crop&fm=jpg&h=700&q=75&w=1050);
    background-position: center center;
    background-size: cover;
}
body {
    background-color: rgba(0, 0, 0, 0.1);
}
.neato-header {
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: white;
    min-width: 50%;
    padding: 30px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    border: 3px solid white;
    border-top: none;
}
.neato-header h1,
.neato-header h2 {
    letter-spacing: 0.05em;
}
.neato-header h1 {
    font-size: 65px;
    font-family: "Open Sans Condensed";
    text-transform: uppercase;
}
.neato-header h2 {
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    font-family: "Vollkorn";
    font-weight: italic;
    font-size: 21px;
    overflow: hidden;
    margin: -30px -33px 0 -33px;
    position: absolute;
    width: calc( 100% + 6px);
}
.neato-header h2:before,
.neato-header h2:after {
    content: "";
    position: absolute;
    width: 100%;
    margin-top: -2px;
    border-top: 3px solid white;
    top: 50%;
}
.neato-header h2:before {
    -ms-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    margin-left: -30px;
}
.neato-header h2:after {
    margin-left: 30px;
}

HTML

Responsive Header Layout

html5, 模板，header, center

编辑器支持Emmet

快捷键

Responsive Header Layout

html5, 模板，header, center

HTML5/BootStrap3一款响应式页面切分布局

一款HTML5/CSS3弹性布局带分类导航树的页面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：