html - 如何在保持相同图像背景的同时在 div 中制作 div-6ren

html - 如何在保持相同图像背景的同时在 div 中制作 div

转载作者：太空宇宙更新时间：2023-11-04 14:01:41

26

4

我在第一个 div 上有一个图像背景。然后我想要一个 div(为方便起见，橙色背景显示在这里)和另一个带有评论的框(称为“评论框”)“上方”。

问题是我不希望“橙色区域”的内容显示在它下面。

这是我目前拥有的:

enter image description here 我当前代码的问题是，我放在“橙色区域”div 中的某些内容确实位于评论框下方，这很丑陋。

这里有一个 jsfiddle:http://jsfiddle.net/uu0xe2xL/1/ :

HTML

<body class='example-page'>

<div id="content">
  <div class="page-main-image" >
  </div>
  <!--div with orange background -->
  <div id="orange-zone">  
  </div>
  <!-- comment box -->
  <div class="comment-box comment" style="opacity: 1;">
      xxx it's cool to comment<br/>
      nice one dude
   </div>
</div>
</body>

CSS

html {
    height:100%;
}

body.example-page {
    height:100%;
}

#content {
    height: 100%;
    margin-top: 18px;
    @media (max-width: 767px) {
        margin-top: 9px;
    }
}
.page-main-image {
    height: 100%;
    background: url('http://www.thedrum.com/uploads/drum_basic_article/115509/main_images/BBCb.jpg'); background-size: cover; background-repeat: no-repeat;
}

#orange-zone {
    position:fixed;
    top:10%; 
    left:30%;
    width:100%;
    height:100%; 
    background-color:orange;
}
.treasure{
  position: absolute;
}

.comment-box {
  position:relative;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 10px;
  bottom:5%;
  right:5%;
}
.comment {
  position:absolute;  
}

这是我想要实现的目标。

enter image description here

请注意，橙色永远不会出现在评论区下方，但在“评论框”下方仍然可以看到带有岛屿的背景图片，这正是我想要实现的目标。

我还想将文本放在橙色区域，但我不能将背景图像放在 body 标签中，因为它必须在菜单之后立即开始，所以它有自己的 a。

随时更新此 jsfiddle

最佳答案

主要思想是使用边框来创建纯色背景。请参阅以下内联演示和说明。

JsFiddle Demo

html, body {
    height: 100%;
    margin: 0;
}
/* setting up background image */
.container {
    background: url("http://i.imgur.com/V4xzKOv.jpg") 0 0 no-repeat;
    background-size: cover;
    position: relative;
    height: 100%;
}
/* creating the borders */
.container:before {
    content: "";
    display: block;
    background-color: rgba(0, 0, 0, .25);
    position: absolute;
    right: 20px;
    bottom: 20px;
    border-style: solid;
    border-color: orange;
    border-width: 20px 30px 90px 190px;
    width: 120px;
    height: 60px;
}
/* positioning the text */
.container p {
    position: absolute;
    width: 280px;
    right: 50px;
    bottom: 45px;
    overflow: auto;
    padding: 0;
    margin: 0;
}
/* creating placeholder and floating it */
.container p:before {
    content: "";
    float: right;
    width: 120px;
    height: 60px;
}

<div class="container">
    <p>Gingerbread tootsie chocolate. Cheesecake gummi bears I love caramels gummies cake oat cake tootsie roll. Ice cream sesame snaps. Biscuit gingerbread I love gummi dragée bear chocolate cheesecake.</p>
</div>

关于html - 如何在保持相同图像背景的同时在 div 中制作 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29578449/

26

4

0

文章推荐： c++ - (Dependency Walker) 缺少函数的显式类型

文章推荐： css - 为什么不同的 CSS3 旋转 + 平移 vs 旋转 + 左

文章推荐： html - 仅单击 block 元素的文本

文章推荐： c++ - 访问 map 内部的 vector ，该 map 位于另一个 map 内

c++ - if 中的多个语句是否与多个 if 相同？
是 if(a == 0 && b == 0 && c == 0) { return; } 一样 if(a == 0) { return; } if(b == 0) { return; } if(c =
Java继承-如何设置子类实例的值以供其他子类共享(相同)？
我想做这样的事情: Class A Class B extends A Class C extends A B b = new B(); C c = new C(); b->setField("foo
Mysql查询(相同)不同的结果集返回不同的结果顺序
我对 Mysql 世界很天真......:)我试图使用连接从表中查询，我遇到结果集问题...表结构如下下面... VIDEO_XXXXX | Field | Type
java - 相同(？)对象的不同对象引用
我最近问过关于从另一个类获取类的唯一实例的问题。 ( How to get specific instance of class from another class in Java? ) 所以，我正
c++ - 比较两种类型是否为 "literally"相同
假设我们有两种类型 using t1 = int*; using t2 = int*; 我知道 std::is_same::value会给我们true .什么是，或者是否有模板工具可以实现以下目标？
PHP - 为什么比较两个完整的长(相同)字符串比比较每个字符串的第一个字符要快得多？
对于我的一个应用程序，我假设比较 2 个字符串的第一个字符比比较整个字符串是否相等要快。例如，如果我知道只有 2 个可能的字符串(在一组 n 字符串中)可以以相同的字母开头(比如说 'q')，如果是这
c - 相同(重复)代码的时钟周期值不同
我想在我的NXP LPC11U37H主板（ARM Cortex-M0）上分析一些算法，因为我想知道执行特定算法需要多少个时钟周期。我编写了这些简单的宏来进行一些分析： #define START_C
excel - 如何在所有工作表中保持页眉(不是静态页眉)相同？
我在 Excel 中创建了一个宏，它将在 Excel 中复制一个表格，并将行除以我确定的特定数字(默认 = 500 行)，并为宏创建的每个部门打开不同的工作表。使用的代码是这样的: Sub Copy
python - 如果一个字典的值与第二个字典的键和第二个字典值 Python 相同
我想根据第一个字典对第二个字典的值求和。如果我有字典 A 和 B。 A = {"Mark": ["a", "b", "c", "d"], "June": ["e", "a"], "John": ["a
perl - system() 返回的值是否与 "$?"相同？
当我这样做时 system()在 Perl 中调用，我通常根据 perldocs 检查返回码.嗯，我是这么想的。大部分时间 $rc!=0对我来说已经足够了。最近我在这里帮助了两个遇到问题的人syste
javascript - 进度条加载速度与 div 相同
在我的进度条上，我试图让它检测 div 加载速度。如果 div 加载速度很快，我想要实现的目标将很快达到 100%。但进度条的加载速度应该与 div 的加载速度一样快。问题:如何让我的进度条加载
Firebase 服务器时间戳与本地(几乎)相同
当我获得与本地时间相同的时间戳时，firebase 生成的服务器时间戳是否会自动转换为本地时间，或者我错过了什么？ _firestore.collection("9213903123").docume
semantics - OWL 双关语是否将同名的类和个体在语义上视为“相同”？
根据the original OWL definition of OWL DL ，我们不能为类和个体赋予相同的名称(这是 OWL DL 和 OWL Full 之间的明显区别)。 "Punning" i
javascript - 允许两个输入复选框的行为与 jquery 相同
我有两个输入复选框: 尝试使用 jQuery 来允许两个输入的行为相同。如果选中第一个复选框，则选中第二个复选框。如果未检查第 1 个，则不会检查第 2 个。反之亦然。我有代码: $('inpu
java - 相同 Java 文件的编译
可以从不同系统编译两个相同的java文件，但它们都有相同的内容操作系统(Windows 7)，会生成不同的.class文件(大小)？最佳答案是的，您可以检查是否有不同版本的JDK(Java Dev
regex - 正则表达式 - .*$ 与 .* 相同
我正在清理另一个人的正则表达式，他们目前所有的都以结尾 .*$ 那么下面的不是完全一样吗？ .* 最佳答案 .*将尽可能匹配，但默认情况下为 .不匹配换行符。如果您要匹配的文本有换行符并且您处于 MU
TypeScript:与Pick <...>相同，但具有多个字段
我使用 Pick ，但是如何编写可以选择多个字段的通用PickMulti呢？ interface MyInterface { a: number, b: number, c: number
sql - 相同 SQL 查询在一个数据库中运行的时间比在同一服务器下的另一个数据库中运行的时间长
我有一个 SQL 数据库服务器和 2 个具有相同结构和数据的数据库。我在 2 个数据库中运行相同的 sql 查询，其中一个需要更长的时间，而另一个在不到 50% 的时间内完成。他们都有不同的执行计划。
php - 使列与 id 相同
我需要你的帮助，我有一个包含两列的表，一个 id 和 numpos，我希望 id 和 numops 具有相同的结果。例子: $cnx = mysql_connect( "localhost", "r
PHP - 表 ID 相同
如何将相同的列(在本例中按“级别”排序)放在一起？我正在做一个高分，我从我的数据库中按级别列出它们。如果他们处于同一级别，我希望他们具有相同的 ID。但是我不想在别人身上显示ID。只有第一个。这是一

首页

博学

6Ren·AI

商城

html - 如何在保持相同图像背景的同时在 div 中制作 div