需要帮助使h1出现在图像的顶部

Question

我在风格化的h1中设置了几行类型（类型是倾斜的，带边框的下划线等）。我希望h1出现在＆＃34; bg-image＆＃34;的顶部。 div class，但我遇到了麻烦。我是使用DIV结构的新手。

＆＃13;

＆＃13;

.bg-image h1 {
	display:inline-block;
  font-size:48px;
  font-family: "sofia-pro",sans-serif;
  font-weight:900;
  text-transform:uppercase;
  color:#fff;
  border-bottom:7px solid #fff;
  padding-bottom:5px;
  margin-top:4px;
    -webkit-transform: rotate(-15deg) skew(-15deg, 0);
       -moz-transform: rotate(-15deg) skew(-15deg, 0);
        -ms-transform: rotate(-15deg) skew(-15deg, 0);
         -o-transform: rotate(-15deg) skew(-15deg, 0);
            transform: rotate(-15deg) skew(-15deg, 0);
			   text-transform: uppercase;
}
.bg-image {
    position: relative;
}
.bg-image img {
    display: block;
    width: 100%;
	background-size:cover;
    max-width: 2000px; /* corresponds to max height of 450px */
    margin: 0 auto;
}

＆＃13;

            <div class="bg-image">
                <img src="http://s27.postimg.org/h12ymqn9v/Web_Hdr_Bground_1.jpg">
               <h1>Nobody</h1>
<br>
<h1>Ever Says</h1>
<br>
<h1>Seize</h1>
<br>
<h1 class="skewed">Tomorrow.</h1>
            </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以在.bg-image类上使用背景图像，以便您拥有更多控制权。 像这样：

.bg-image h1 {
	display:inline-block;
  font-size:48px;
  font-family: "sofia-pro",sans-serif;
  font-weight:900;
  text-transform:uppercase;
  color:#fff;
  border-bottom:7px solid #fff;
  padding-bottom:5px;
  margin-top:4px;
    -webkit-transform: rotate(-15deg) skew(-15deg, 0);
       -moz-transform: rotate(-15deg) skew(-15deg, 0);
        -ms-transform: rotate(-15deg) skew(-15deg, 0);
         -o-transform: rotate(-15deg) skew(-15deg, 0);
            transform: rotate(-15deg) skew(-15deg, 0);
			   text-transform: uppercase;
}
.bg-image {
    position: relative;
    width: 500px;
    height: 500px;
    background: url('http://s27.postimg.org/h12ymqn9v/Web_Hdr_Bground_1.jpg') center;
    background-size: cover;
}
   

            <div class="bg-image">
               <h1>Nobody</h1>
<br>
<h1>Ever Says</h1>
<br>
<h1>Seize</h1>
<br>
<h1 class="skewed">Tomorrow.</h1>
            </div>

Answer 2

我是代码新手，只是看到了这个问题。你试过z-index吗？ z-index控制网页的z轴（向上和向下）。尝试将z-index：-1放在css上以确保图片显示在网页上的文本下方。希望这有帮助！

Answer 3

你必须使用位置：相对和你希望h1达到你想要的结果的像素距离。我只是尝试添加位置：相对;和顶部：-450px;

＆＃13;

＆＃13;

.bg-image h1 {
  display:inline-block;
  font-size:48px;
  font-family: "sofia-pro",sans-serif;
  font-weight:900;
  text-transform:uppercase;
  color:#fff;
  border-bottom:7px solid #fff;
  padding-bottom:5px;
  margin-top:4px;
    -webkit-transform: rotate(-15deg) skew(-15deg, 0);
       -moz-transform: rotate(-15deg) skew(-15deg, 0);
        -ms-transform: rotate(-15deg) skew(-15deg, 0);
         -o-transform: rotate(-15deg) skew(-15deg, 0);
            transform: rotate(-15deg) skew(-15deg, 0);
			   text-transform: uppercase;
   position: relative;
   top: -450px;
}
.bg-image {
    position: relative;
}
.bg-image img {
    display: block;
    width: 100%;
	background-size:cover;
    max-width: 2000px; /* corresponds to max height of 450px */
    margin: 0 auto;
}

＆＃13;

            <div class="bg-image">
                <img src="http://s27.postimg.org/h12ymqn9v/Web_Hdr_Bground_1.jpg">
               <h1>Nobody</h1>
<br>
<h1>Ever Says</h1>
<br>
<h1>Seize</h1>
<br>
<h1 class="skewed">Tomorrow.</h1>
            </div>

＆＃13;

＆＃13;

＆＃13;