<div>的背景被<body>的背景遮蔽了。。。。。

最新推荐文章于 2025-08-05 15:43:49 发布
最新推荐文章于 2025-08-05 15:43:49 发布
阅读量2.6k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： div scroll float html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hpuyancy/article/details/7185916
本文介绍了一种解决&lt;div&gt;元素背景被&lt;body&gt;元素遮挡的方法，通过设置&lt;div&gt;的CSS属性为overflow:hidden;实现自适应高度，并避免背景颜色被遮盖。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

       <div>的背景被<body>的背景遮蔽了，因为我想让页面的高度是auto自适应的，不然得用overflow: scroll;自己在网上找到了这个方法，就是在<div>的CSS中加上 overflow:hidden;因为通过设置高度值不太可靠，没办法知道页面到底有多高！

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
</head>
<body style="background-color:#FFFFFF;height:auto;">
   <div style="background-color:#99CC33;width:100px; overflow:hidden;">
         <div style="float:left;width:100%"> first1</div>
         <div style="float:left;width:100%;margin-top:10px;"> first2</div>
   </div>
</body>
<html>
hpuyancy
关注
html内容被背景图片遮住怎么办_定义BODY背景图后，DIV的背景图片显示不全（已解决）...
weixin_39593744的博客
12-20 2999
你的位置:问答吧-> WEB标准-> 问题详情定义BODY背景图后，DIV的背景图片显示不全(已解决)一个有趣的问题，当BODY有背景图片的时候，BODY里的DIV一旦也有背景图片，就显示不完全，被BODY的背景图片挡住了下面一部分...IE下被挡住的部分比较小，火狐下被挡住部分很大...两者都十分明显。当我把...
重学前端 详解表单 / 详解input / 浏览器私有前缀的作用（第六天）
全网同名：PBitW！ 可以去掘金关注我！
07-24 1474
form表单 action method name label（标记） 神奇的input input源css（及type=text） 浏览器前缀 writing-mode（文本在水平或垂直方向上的排布）【对于input】 sideways-lr sideways-rl 2020/8/13补（对于可换行元素）： text-rendering（定义浏览器引擎如何渲染字体） -internal-light-dark【未解决】 letter-spacing（字符间距） word-spacing （字间隔） lett
覆盖掉body的背景图,只需要在相应的地方使用背景色,因为子元素背景色的优先级高于父元素背景图...
weixin_34162401的博客
02-15 556
如题 转载于:https://www.cnblogs.com/zuoxiaobing/p/3550296.html
css背景图片不影响上一层透明组件的背景色
qietingfengsong的博客
09-05 324
项目中遇到一个奇怪的问题，引入一个库的css样式之后，影响了原先组件的滚动条样式。
<!DOCTYPE html> <html> <head> <title>{title}</title> <meta http-equiv="Content-Type" content="text/html; charset={charset}" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" type="text/css" href="{static_server}/static/templates/2016_01/index.css?20160506"/> <link rel="shortcut icon" href="{static_server}/static/images/tongda.ico" /> {javascript} </head> <body onload="javascript:document.form1.{focus_filed}.focus();" scroll="auto"> {update_tips} <img src="/static/templates/2016_01/tdxk.png" class="tdxk" /> <form class="login_form" name="form1" method="post" action="logincheck.php" {autocomplete} onsubmit="{form_submit}"> <div id="center" class="center"> <img src="/static/templates/2016_01/logo.png" class="logo"> <div class="input-wrap name"> <label for="name">用户名：</label> <input type="text" id="name" name="UNAME" maxlength="20" onmouseover="this.focus()" onfocus="this.select()" value="{username_cookie}" placeholder="请输入用户名"/> </div> <div class="input-wrap password"> <label for="password">密　码：</label> <input type="password" id="password" name="PASSWORD" maxlength="200" onmouseover="this.focus()" onfocus="this.select()" value="" placeholder="请输入密码"/> </div> <!-- <div > --> <input type="hidden" name="encode_type" value="1"> <button type="submit" id="submit" class="login_btn" title="登录">登录</button> <!-- </div> --> <!--<div class="logo"><img src="{static_server}/static/templates/2015_02/logo.png" /></div>--> <!--<div class="clear"></div>--> </div> <div style="margin-top: 30px;text-align:center;font-size: 30px;line-height: 40px;color:red;"><strong>非密信息系统，禁止存储，处理和传输涉密信息！</strong></div> <div class="msg" style="width: 350px;margin: 0 auto;"> <div>{tips}</div> <div>{usb_key_option}</div> <div>{miibeian}</div> <div>{antivirus_script}</div> </div> <!--设置公司特色注释 <div align="center" class="msg"> <div><span style='color:red;margin-right:10px;'>xxxxxx</span><a href='http://www.tongda2000.com/' target='_black'>通达官网</a></div> </div> 设置公司特色注释 结束--> <div style="width: 350px;margin: 0 auto;">{usbkey_object}</div> </form> </body> </html> 帮我分析一下
07-11
1. 页面结构：包含<head>和<body>，<head>中定义了标题、字符集、样式表和脚本等。<body>中主要是一个登录表单。 2. 表单元素： - 表单名称为form1，提交到"logincheck.php"，方法为post。 - 有两个输入框：用户名...
js 实现div 遮蔽
11-23
<title>js 实现div 遮蔽</title> </head> <body> <!-- 页面内容 --> <button id="myButton">开始操作</button> <!-- 遮罩层 --> <div class="mask"></div> <!-- 操作区 --> <div class="operation-area"> ...
微信提示 在浏览器打开 效果实现过程解析
10-16
<div id="Mask" style=""></div> <style> #Mask { position: absolute; top: 0; left: 0; display: none; background-image: url(img/tweixinip.jpg); background-size: cover; width: 100%; height: 100%...
JavaScript实现页面操作遮蔽技术
遮蔽层div通常会包含一个半透明的背景，以便告知用户当前正在进行的是一个需要等待的操作。在此基础上，我们可以在遮蔽层中放置一个等待提示，例如“加载中...”这样的信息。 创建遮蔽层的基本步骤包括： 1. 通过...
css如何写body背景图被正文盖住，body文字一直在背景特定位置，且所有浏览器位置固定
思祁阁
02-23 8291
效果： 代码：       *{  margin:0;  padding:0 }   a{  text-decoration: none; }   img{     border: none;   }   .background{      height: 200px;      position: absolute;      widt
CSS 让背景图片全部显示，填满父div
热门推荐
EightSwords的博客
04-22 4万+
.class{ background-image: url('test.jpg'); background-size: 100% 100%; } 起初是在处理一个图片显示的问题, 图片没有有一部分没有显示出来, 之后用到了background-size, 发现有必要总结一下。 background-size     首先声明        back
关于body的背景
qq_43952245的博客
08-08 485
body背景 画布 canvas 一块区域 特点： 最小宽度为视口宽度 最小高度为视口高度 HTML元素的背景 覆盖画布 BODY元素的背景 如果HTML元素有背景，BODY元素正常（背景覆盖边框盒） 如果HTML元素没有背景，BODY元素的背景覆盖画布 关于画布背景图 背景图的宽度百分比，相对于视口 背景图的高度百分比，相对于网页高度 背景图的横向位置百分比、预设值，相对于视口 背景图的纵...
css 设置背景图一半_css怎么背景图片显示不全？
weixin_39716044的博客
12-20 6684
css设置背景图片显示不全是因为背景图片过大导致的，我们可以通过设置div大小大于背景图片或使用background-size属性设置背景图片小于div大小使背景图片显示完全。其中导致背景图片显示不全的原因是：设置背景图片所在div大小小于背景图片大小。示例：下面我们来看一下通过设置div大小来使背景图片完全显示：div{width:100px;height:100px;background-si...
html背景自动覆盖,div背景半透明，覆盖整个可视区域的遮罩层效果
weixin_30166291的博客
05-30 852
html代码很简单 1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码:.opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; }2 、要覆盖整个可视区域通常的做法是:html,body{ height:100%}.mask{height:1...
数组去重常见的方法
qweasd222asd的博客
09-14 492
1.Set() 代码： var arr=[1,2,34,5,5,"5","hello","hello","world",88] var set=new Set(arr); var arr=[...set]; console.log(arr) 结果 2.splice() 代码： var arr=[1,2,34,5,5,"5","hello","hello","world",88] function fnc(arr){
css样式防止被覆盖
limengmeng9006的专栏
12-06 2万+
CSS的全称叫做“层叠样式表”，但估计很多人都不知道“层叠”二字的含义。其实，“层叠”指的就是样式的覆盖，当一个元素被运用上多种样式，并且出现重名的样式属性时，浏览器必须从中选择一个属性值，这个过程就叫“层叠”。 首先需要明确的是，很多情况都会导致一个元素被运用上多种样式，样式覆盖的规则也需要根据不同的情况来定，具体规则如下。      规则一：由于继承而发生样式冲突时，最近祖
备忘录记事本 任务清单 html
最新发布
qq_42949957的博客
08-05 202
任务记录清单
怎么定义<div>背景颜色
04-02
在网页设计中，可以通过CSS来设置 `<div>` 元素的背景颜色。以下是几种常见的方法： 1. **内联样式** 直接将 `style` 属性添加到 `<div>` 标签中，并通过 `background-color` 属性指定颜色值。 ```html <div style="background-color: blue;">这是蓝色背景</div> ``` 2. **内部样式表（<style>标签）** 在HTML文件的 `<head>` 部分定义CSS规则，并应用特定的选择器选择对应的 `<div>`。 ```html <head> <style> .blue-bg { background-color: blue; } </style> </head> <body> <div class="blue-bg">这是蓝色背景</div> </body> ``` 3. **外部样式表** 将所有CSS放在独立的 `.css` 文件中，在HTML文档头部引入该文件并通过类名或其他选择器控制元素样式。 - CSS 文件 (`styles.css`) 内容： ```css .red-bg { background-color: red; } ``` - 引入并使用： ```html <link rel="stylesheet" href="styles.css"> <div class="red-bg">这是红色背景</div> ``` 4. **使用RGB/RGBA/HSL等高级色彩模型** 如果想更精确地调整颜色及其透明度，可以采用 RGB、RGBA 或 HSL 等格式设定背景色。 ```html <div style="background-color: rgba(255, 0, 0, 0.5);">半透明红</div> ``` 以上就是定义 `<div>` 背景颜色的主要方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值