Question

我正在尝试在我网站上的图片上显示标题。这是一个小提琴：

我尝试通过创建带有ID标头的标题来解决问题，例如：

<bean class="org.springframework.jms.listener.DefaultMessageListenerContainer"  id="pitagorCPYListener">
    <property name="autoStartup" value="false" />
    <property name="connectionFactory" ref="cachedConnectionFactory" />
    <property name="destination" ref="defaultDestination" />
    <property name="messageListener" ref="listenerPitagorCPY" />
</bean>

 <bean id="defaultDestination" class="com.ibm.mq.jms.MQQueue">
    <constructor-arg value="#{mqConnectionFactory.destination}"/>
  </bean>

并使用z-index完全设置样式以确保它显示在顶部，如：

<h2 id="header">Text</h2>

我假设这会导致将标题定位在从文档边缘定位的所有元素之上。但是，我没有得到理想的结果。我该怎么做呢？另外，我昨晚读到使用浮子比定位更好。不确定这是否适用于这种情况，或者它是否属实。如果有人可以权衡，我将不胜感激。

Answer 1

您必须调整HTML内容的结构，以便#header位于.parallax之前。使用您想要的风格：

＆＃13;

.parallax{
    background-image: url("https://images.pexels.com/photos/349608/pexels-photo-349608.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
    min-height: 500px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
}

#header{
  position: absolute;
  z-index: 1000;
  top: 200px;
  left: 200px;
}

.text-box{
	height: 600px;
	padding: 50px;
}
@media only screen and (max-device-width: 1024px) {
    .parallax {
        background-attachment: scroll;
    }
}

.navbar {
    margin-bottom: 0 !important;
}

＆＃13;

<title>Bootstrap Default Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<h1 id="header">Text</h1>
<div class="parallax"></div>
<div class="col-lg-12 text-box text-center">
<h1>Restauraunt Heading</h1>
</div>
</body>

＆＃13;

Answer 2

另一种解决方案是简单地将你的h1放入一个旁观者......

＆＃13;

.parallax{
    background-image: url("https://images.pexels.com/photos/349608/pexels-photo-349608.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
    min-height: 500px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    position:relative;

}
.text-box{
	height: 600px;
	padding: 50px;
}
@media only screen and (max-device-width: 1024px) {
    .parallax {
        background-attachment: scroll;
    }
}
#header{
 position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.navbar {
    margin-bottom: 0 !important;
}

＆＃13;

<title>Bootstrap Default Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="parallax"><h1 id="header">Text</h1></div>
<div class="col-lg-12 text-box text-center">
<h1>Restauraunt Heading</h1>

</div>
</body>

＆＃13;

Answer 3

您的.paralax课程还需要添加位置属性relative或absolute。您也可以设置z-index: 0

啊，z-index: 1对标题来说已经足够了：）

Answer 4

您需要将position: absolute更改为position: fixed。绝对定位将元素相对于其父容器放置。固定定位使其相对于文件主体。相对定位（position: relative）将其相对于自然落在DOM流中的位置。

Fiddle here

Answer 5

图片+文字+ 在SaaS上

title: {
display: "inline-block",
position: "relative", 
marginTop: "30px",
minHeight: "32px",
color: "#FFFFFF",
textDecoration: "none"
}

parallax: {
backgroundImage: 'url(/images/example.jpg)', 
height: "90vh",
maxHeight: "1000px",
overflow: "hidden",
position: "relative",
backgroundPosition: "center center",
backgroundSize: "cover",
margin: "0",
padding: "0",
border: "0",
display: "flex",
alignItems: "center"
},

如何在视差滚动图像上放置文本

5 个答案: