css如何制作横幅,javascript-仅使用CSS的标题横幅？

我是CSS的初学者,并且我尝试创建仅包含CSS的英雄横幅并使其具有响应能力,如果我缩放页面或缩小页面的尺寸,我对文本顶部的位置感到困惑文本没有回应.

This is a title

some texts here

CSS：

.main-header img {

max-width: 100%;

margin: 0 auto;

position: relative;

}

.title {

position: relative;

top: -450px;

left: 10%;

text-align: center;

display: inline-block;

color: white;

margin: 0 auto;

width: 80%;

text-transform: uppercase;

}

.title h1 {

font-size: 2.7rem;

font-weight: 700;

margin: 0 auto;

width: 80%;

margin-bottom: 1.5%;

}

.title p {

font-size: .60rem;

width: 33%;

margin: 0 auto;

line-height: 1.8;

}

甚至有可能仅使用CSS创建英雄横幅吗？因为我看不到任何教程.

解决方法:

示例：带有图像和文本的自适应英雄横幅

这是仅使用css的带有图像和文本的全宽度响应式英雄横幅的极小示例.

HTML：

Hero Title

Hero paragraph text.

唯一不寻常的元素是“ hero-sizing” div.可以确保横幅图像在不同的窗口大小下保持其宽高比(稍后会详细介绍“英雄尺寸”).

到CSS.首先是最外层的英雄包装类：

.hero-wrapper {

clear: both;

position: relative;

width: 100%;

text-align: center;

font: 18px helvetica, sans-serif;

color: white;

}

这里没有什么让人困惑的地方,主要只是设置一些格式.请注意,宽度：100％使横幅扩展窗口的整个宽度.

接下来是英雄类,它指定横幅图像及其显示方式：

.hero {

background-image: url(http://lorempixel.com/image_output/people-q-c-1200-400-6.jpg);

background-repeat: no-repeat;

background-attachment: scroll;

background-position: center;

background-size: 100% auto;

}

这个Hero类指定图像,将其居中并将其设置为容器的整个宽度.

接下来是英雄调整大小类,负责调整横幅大小后的纵横比：

.hero-sizing {

padding-top: 33%;

}

为了保持图像的长宽比,顶部填充必须与图像的高宽比匹配.由于此示例中的图像宽1200 x高400,因此我们将padding-top设置为33％.英雄调整大小起着重要的作用-伸展和缩小包含背景图像的div的高度,因此div的纵横比和图像的纵横比始终匹配.

有了上述CSS,我们现在有了一个全幅的响应式横幅图像,可以保持其长宽比,但是我们仍然希望能够向横幅中添加一些文本并使它看起来不错.这就是hero-content类和’hero-content：before伪类的用途：

.hero-content {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

.hero-content:before {

content: ' ';

display: block;

height: 40%;

}

无论图像的大小如何,我们的内容都应放置在图像上大致相同的位置.为了实现这一点,我们在伪类之前使用了一个小技巧：将我们的内容向下推送横幅当前高度的40％.这种定位“技巧”意味着我们内容的位置是敏感的,因为它会停留在图像上的同一位置.

最终的CSS仅设置一些格式首选项：

.hero-content h1,

.hero-content p {

margin-top: 0px;

margin-bottom: 6px;

}

我们完成了.

当然,这只是一个最低限度的示例,可以对带有@media查询的小屏幕进行改进(例如减小字体大小),但是此示例显示了如何实现两个非常有用的功能：

>保持宽高比的全宽响应式英雄横幅图像

>内容在图片上的位置一致

标签：banner,css,html,javascript,jquery

来源： https://codeday.me/bug/20191119/2032796.html