html - 显示 div 背景图像完成-6ren

html - 显示 div 背景图像完成

转载作者：行者123 更新时间：2023-11-28 15:25:11

24

4

我无法获取 div 容器的完整背景图像。我想看到图片的高度为 100%，宽度为 100%。如果我在 html 代码中将图像添加为标签，它会完美运行，但我想在图像上写一些标题。我的意思是侧边栏的背景图像“标题侧边栏”。这是 my Page +代码:

*{
    margin: 0px;
    padding: 0px;
    color: black;
}

body{
    background-image: url(bg.jpg);
    height: 1500px;
}

section{
    margin-top: 100px;
    width: 1230px;
    height: 100%;
    
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 200px;
}

article{
    background-color: #FBB9B7;
    width: 800px;
    height: 100%;
    
    float: left;
    
    padding: 20px;
    
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
}

aside{
    background-color: #FBB9B7;
    width: 300px;
    height: 100%;
    
    float: right;
    
    padding: 20px;
    
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
}

.header-sidebar{
    background: url(http://www.drlaureen.com/wp-content/uploads/2014/09/headline-sidebar.png) no-repeat;
    height: 50px;
    width: 100%;
    text-align: center;
    padding-top: 8px;
}

<html>
    <head>
        <link href='index.css' rel='stylesheet' type='text/css'>
    </head>
    
    <body>
        <section>
            <article>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </article>
            <aside>
                
                
                <div class="header-sidebar">
                    Überschrift 1 
                </div> 
            </aside>
        </section>
    </body>
</html>

最佳答案

在 body 中使用 background-size:cover 而不是定义高度和宽度

关于html - 显示 div 背景图像完成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28098023/

24

4

0

文章推荐： javascript - jQuery 外部文本请求图像

文章推荐： ios - userAcceleration 返回的计量单位是什么？

文章推荐： javascript - 现有函数未定义

文章推荐： ios - 如何在协议(protocol)中声明通用协议(protocol)属性要求

dart - 对于 "pubsub.stream.listen(print, onDone: (){print(' 完成')})。 ", the "完成 :"never work
从 Redis 获取消息时，onDone:(){print('done')} 从未起作用。 import 'package:dartis/dartis.dart' as redis show PubS
Vim状态栏的预测/完成？
昨天我玩了一些vim脚本，并设法通过循环来对当前输入的内容进行状态栏预测(请参见屏幕截图(灰色+黄色栏))。问题是，我不记得我是怎么得到的，也找不到我用于该vim魔术的代码片段(我记得它很简单):它
Bash 完成
我尝试加载 bash_completion在我的 bash (3.2.25) 中，它不起作用。没有消息等。我在我的 .bashrc 中使用了以下内容 if [ -f ~/.bash_completio
具有等号和可枚举标志值的 Bash 完成
我正在尝试构建一个 bash 完成例程，它将建议命令行标志和合适的标志值。例如在下面 fstcompose 命令我想比赛套路先建议 compose_filter= 标志，然后建议来自 [alt_seq
重定向符号后的 Bash 完成
当我尝试在重定向符号后完成路径时，bash 完成的行为就好像它仍在尝试在重定向之前完成命令的参数一样。例如: dpkg -l > /med标签通过在 /med 之后点击 Tab我希望它完成通往 /
iphone - CAKeyframeAnimation 完成
我的类中有几个 CAKeyframeAnimation 对象。他们都以 self 为代表。在我的animationDidStop函数中，我如何知道调用来自哪里？是否有任何变量可以传递给 CAKe
cocoa - NSDateFormatter 完成
我有一个带有 NSDateFormatter 的 NSTextField。格式化程序接受“mm/dd/yy”。可以自动补全日期吗？因此，用户可以输入“mm”，格式化程序将完成当前月份和年份。最佳答
cocoa - NSTextfield 完成
有一个解决方案可以使用以下方法完成 NSTextField : - (NSArray *)control:(NSControl *)control textView:(NSTextView *)tex
javascript - 完成()与返回完成()
我正在阅读 Passport 的文档，我注意到 serialize()和 deserialize() done()被调用而不被返回。但是，当使用 passport.use() 设置新策略时在回调函数
javascript 加载图像!完成
在 ubuntu 11.10 上的 Firefox 8.0 中，尽管 img.complete 为 false，但仍会调用 onload 函数 draw。我设法用 setTimeout hack 解决
c++ - 等待第一个将来用C++完成
假设我有两个与两个并行执行的计算相对应的 future 。我如何等到第一个 future 准备好？理想情况下，我正在寻找类似于Python asyncio's wait且参数为return_when=
Java 数据结构表明队列已结束/完成？
我正在寻找一种 Java 7 数据结构，其行为类似于 java.util.Queue，并且还具有“最终项目已被删除”的概念。例如，应可以表达如下概念: while(!endingQueue.isFi
jquery - 完成 If 语句
这是一个简单的问题。 if ($('.dataTablePageList')) { 我想做的是执行一个 if 语句，该语句表示如果具有 dataTablesPageList 类的对象也具有 menu
jQuery 在执行之前等待replaceWith 完成
我用replaceWith批量替换了许多div中的html。替换后，我使用 jTruncate 来截断文本。然而它不起作用，因为在执行时，replaceWith 还没有完成。我尝试了回调技巧 ( H
JavaScript 表单提交()完成
有没有办法调用 javascript 表单 submit() 函数或 JQuery $.submit() 函数并确保它完成提交过程？具体来说，在一个表单中，我试图在一个 IFrame 中提交一个表单。
javascript - 推迟行动直到 .each() 完成
我有以下方法: function animatePortfolio(fadeElement) { fadeElement.children('article').each(function(i
android - registerEntityModifier 完成
我刚刚开始使用 AndEngine，我正在像这样移动 Sprite : if(pValueY < 0 && !jumping) { jumping =
android - 完成 "all"异步任务后更新屏幕
我正在使用 asynctask 来执行冗长的操作，例如数据库读取。我想开始一个新 Activity 并在所有异步任务完成后呈现其内容。实现这一目标的最佳方法是什么？我知道 onPostExecute
从另一个完成 Bash 完成
我有一个脚本需要命令名称和该命令的参数作为参数。所以我想编写一个完成函数来完成命令的名称并完成该命令的参数。所以我可以这样完成命令的名称 if [[ "$COMP_CWORD" == 1 ]];
android - 完成()不工作
我的应用程序有一个相当奇怪的行为。我在 BOOT_COMPLETE 之后启动我的应用程序，因此在我启动设备后它是可见的。 GUI 响应迅速，一切正常，直到我调用 finish()，按下按钮时，什么都没

首页

博学

6Ren·AI

商城

html - 显示 div 背景图像完成