首页 \ 问答 \ 如何在封面图片下方放置文字?(How to put text below the cover image?)

如何在封面图片下方放置文字?(How to put text below the cover image?)

我试图达到以下效果。 看起来像背景的图像放在页面的前60%。 如果图像不成比例,则应保持正确的宽高比。

在此图像之后,其他一些文字会出现

我在上半场取得了成绩

#fullcover{
    position: absolute;
    background-image: url(img);
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    max-height: 60%;
}

但问题是我的文字现在隐藏在我的图像背后。 我怎么能把它正好放在下面? JsFiddle就在这里

对不起,首先不包括这个:我宁愿不使用html,身体100%。


I am trying to achieve the following effect. An image that looks like a background is placed in the top 60% of the page. If the image is unproportional, it should keep correct aspect ratio.

After this image some other text goes.

I achieved the first half with

#fullcover{
    position: absolute;
    background-image: url(img);
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    max-height: 60%;
}

but the problem is that my text is now hiding behind my image. How can I put it exactly below? JsFiddle is here.

Sorry for not including this in the first place: I would rather not use html, body 100%.

更新时间:2022-07-16 16:07

相关文章

更多

最新问答

更多
  • 如何在Laravel 5.2中使用paginate与关系?(How to use paginate with relationships in Laravel 5.2?)
  • linux的常用命令干什么用的
  • 由于有四个新控制器,Auth刀片是否有任何变化?(Are there any changes in Auth blades due to four new controllers?)
  • 如何交换返回集中的行?(How to swap rows in a return set?)
  • 在ios 7中的UITableView部分周围绘制边界线(draw borderline around UITableView section in ios 7)
  • 使用Boost.Spirit Qi和Lex时的空白队长(Whitespace skipper when using Boost.Spirit Qi and Lex)
  • Java中的不可变类(Immutable class in Java)
  • WordPress发布查询(WordPress post query)
  • 如何在关系数据库中存储与IPv6兼容的地址(How to store IPv6-compatible address in a relational database)
  • 是否可以检查对象值的条件并返回密钥?(Is it possible to check the condition of a value of an object and JUST return the key?)
  • GEP分段错误LLVM C ++ API(GEP segmentation fault LLVM C++ API)
  • 绑定属性设置器未被调用(Bound Property Setter not getting Called)
  • linux ubuntu14.04版没有那个文件或目录
  • 如何使用JSF EL表达式在param中迭代变量(How to iterate over variable in param using JSF EL expression)
  • 是否有可能在WPF中的一个单独的进程中隔离一些控件?(Is it possible to isolate some controls in a separate process in WPF?)
  • 使用Python 2.7的MSI安装的默认安装目录是什么?(What is the default installation directory with an MSI install of Python 2.7?)
  • 寻求多次出现的表达式(Seeking for more than one occurrence of an expression)
  • ckeditor config.protectedSource不适用于editor.insertHtml上的html元素属性(ckeditor config.protectedSource dont work for html element attributes on editor.insertHtml)
  • linux只知道文件名,不知道在哪个目录,怎么找到文件所在目录
  • Actionscript:检查字符串是否包含域或子域(Actionscript: check if string contains domain or subdomain)
  • 将CouchDB与AJAX一起使用是否安全?(Is it safe to use CouchDB with AJAX?)
  • 懒惰地初始化AutoMapper(Lazily initializing AutoMapper)
  • 使用hasclass为多个div与一个按钮问题(using hasclass for multiple divs with one button Problems)
  • Windows Phone 7:检查资源是否存在(Windows Phone 7: Check If Resource Exists)
  • 无法在新线程中从FREContext调用getActivity()?(Can't call getActivity() from FREContext in a new thread?)
  • 在Alpine上升级到postgres96(/ usr / bin / pg_dump:没有这样的文件或目录)(Upgrade to postgres96 on Alpine (/usr/bin/pg_dump: No such file or directory))
  • 如何按部门显示报告(How to display a report by Department wise)
  • Facebook墙贴在需要访问令牌密钥后无法正常工作(Facebook wall post not working after access token key required)
  • Javascript - 如何在不擦除输入的情况下更改标签的innerText(Javascript - how to change innerText of label while not wiping out the input)
  • WooCommerce / WordPress - 不显示具有特定标题的产品(WooCommerce/WordPress - Products with specific titles are not displayed)