要开始我是非常新的自举,但我想要做一些类似于这个例子:text over background image但在一个引导框架内。我曾尝试在导航栏下面的容器内创建一个div,但似乎在背后的文字背后放置了白色背景......您可以在此处看到我的代码:JSFiddle:my code。或者是如下:如何创建背景图片并在其上添加文字

CSS

body {

margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */

}

@import url(http://fonts.googleapis.com/css?family=Oswald:700);

html {

background: url(http://3.bp.blogspot.com/_6r-mOI0OuO0/S6q3VodCqI/AAAAAAAAB5A/Uycl8dCr92A/s1600/NYC15BrooklynBridge02.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

font-family: 'Oswald', sans-serif;

}

h1 {

color: #fff;

text-align: center;

font-size: 120px;

text-transform: uppercase;

}

span {

font-size: 130px;

color: transparent;

text-shadow: 0 0 10px #fff;

}

HTML

Full - Start Bootstrap Template

@import url(http://fonts.googleapis.com/css?family=Oswald:700);

h1 {

color: #FF6600;

text-align: center;

font-size: 120px;

text-transform: uppercase;

}

span {

font-size: 130px;

color: transparent;

text-shadow: 0 0 10px #FF6600;

}

some text
some other text

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐