带有 flexbox 的字体图标作为页面背景
font icon as page background with flexbox
我正在尝试使用字体图标作为背景图像,并使用 flexbox 将其水平和垂直居中。我已经把这个设置到正文了。
我希望所有其他内容位于字体图标上方,并且我使用相同的 flex 属性使内容居中。
我在 codepen 上创建了一支笔。
------html--------------
<div class="module-card">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem possimus ipsam commodi consequuntur quo dolor ad cupiditate blanditiis perferendis maiores incidunt dolores similique officiis a provident, obcaecati temporibus! Culpa, reprehenderit.</p>
</div>
-----css-------------
body{
display: flex;
align-items: center;
justify-content: center;
height:100vh;
z-index:-1;
}
body:before {
content: "\f113";
font-family: FontAwesome;
/*--adjust as necessary--*/
color: blue;
font-size: 30em;
text-shadow: 2px 2px #ff0000;
}
.module-card {
width:50%;
background: #fff;
padding: 10px;
display: flex;
flex-direction: column;
background: rgba(0,191,255,0.2);
z-index:9999;
}
是否可以用这个代替背景图片?
谢谢,
苏海尔.
只需要将您的 html/css 修改为如下内容:http://codepen.io/anon/pen/EVLpGq
HTML:
<div class="someother-dif">
<div class="module-card">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem possimus ipsam commodi consequuntur quo dolor ad cupiditate blanditiis perferendis maiores incidunt dolores similique officiis a provident, obcaecati temporibus! Culpa, reprehenderit.</p>
</div>
</div>
CSS:
body{
display: flex;
align-items: center;
justify-content: center;
height:100vh;
z-index:-1;
}
/*replace the content value with the
corresponding value from the list below*/
body:after {
content: "\f113";
font-family: FontAwesome;
/*--adjust as necessary--*/
color: blue;
font-size: 30em;
text-shadow: 2px 2px #ff0000;
z-index:1;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
font-size: 400px;
top: 50%;
left: 50%;
margin: -300px 0 0 -200px;
z-index: 1;
}
.someother-dif:after{
}
.module-card {
width:50%;
margin-left:auto;
margin-right:auto;
background: #fff;
padding: 10px;
display: flex;
flex-direction: column;
background: rgba(0,191,255,0.2);
z-index:9999;
position:relative;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height:100vh;
z-index:-1;
position: relative;
}
body::after {
content: "\f113";
font-family: FontAwesome;
color: blue;
font-size: 30em;
text-shadow: 2px 2px #ff0000;
}
.module-card {
width:50%;
background: #fff;
padding: 10px;
display: flex;
/* flex-direction: column; */
background: rgba(0,191,255,0.2);
z-index:9999;
/* center and overlay content */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
我正在尝试使用字体图标作为背景图像,并使用 flexbox 将其水平和垂直居中。我已经把这个设置到正文了。
我希望所有其他内容位于字体图标上方,并且我使用相同的 flex 属性使内容居中。
我在 codepen 上创建了一支笔。
------html--------------
<div class="module-card">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem possimus ipsam commodi consequuntur quo dolor ad cupiditate blanditiis perferendis maiores incidunt dolores similique officiis a provident, obcaecati temporibus! Culpa, reprehenderit.</p>
</div>
-----css-------------
body{
display: flex;
align-items: center;
justify-content: center;
height:100vh;
z-index:-1;
}
body:before {
content: "\f113";
font-family: FontAwesome;
/*--adjust as necessary--*/
color: blue;
font-size: 30em;
text-shadow: 2px 2px #ff0000;
}
.module-card {
width:50%;
background: #fff;
padding: 10px;
display: flex;
flex-direction: column;
background: rgba(0,191,255,0.2);
z-index:9999;
}
是否可以用这个代替背景图片?
谢谢, 苏海尔.
只需要将您的 html/css 修改为如下内容:http://codepen.io/anon/pen/EVLpGq
HTML:
<div class="someother-dif">
<div class="module-card">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem possimus ipsam commodi consequuntur quo dolor ad cupiditate blanditiis perferendis maiores incidunt dolores similique officiis a provident, obcaecati temporibus! Culpa, reprehenderit.</p>
</div>
</div>
CSS:
body{
display: flex;
align-items: center;
justify-content: center;
height:100vh;
z-index:-1;
}
/*replace the content value with the
corresponding value from the list below*/
body:after {
content: "\f113";
font-family: FontAwesome;
/*--adjust as necessary--*/
color: blue;
font-size: 30em;
text-shadow: 2px 2px #ff0000;
z-index:1;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
font-size: 400px;
top: 50%;
left: 50%;
margin: -300px 0 0 -200px;
z-index: 1;
}
.someother-dif:after{
}
.module-card {
width:50%;
margin-left:auto;
margin-right:auto;
background: #fff;
padding: 10px;
display: flex;
flex-direction: column;
background: rgba(0,191,255,0.2);
z-index:9999;
position:relative;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height:100vh;
z-index:-1;
position: relative;
}
body::after {
content: "\f113";
font-family: FontAwesome;
color: blue;
font-size: 30em;
text-shadow: 2px 2px #ff0000;
}
.module-card {
width:50%;
background: #fff;
padding: 10px;
display: flex;
/* flex-direction: column; */
background: rgba(0,191,255,0.2);
z-index:9999;
/* center and overlay content */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}