css positon与background 关系

最新推荐文章于 2021-06-07 13:29:40 发布
最新推荐文章于 2021-06-07 13:29:40 发布
阅读量171 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/peade/article/details/81807080
版权

在开发的时候，A元素叠在B元素上

A元素设置了 background:#fff 

显示时，A元素底部透出了B元素的内容，有透明的效果。没有实现A元素遮挡住B元素的效果，background没有完全起作用

解决问题的方法是，在A元素上设置 position：relative

 

原因未知

 

margin background_干货极致分享——CSS 外边距(margin)重叠及防止方法，网友感动哭...
weixin_39882271的博客
11-22 210
边距重叠解决方案(BFC)首先要明确BFC是什么意思，其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。但是边界的...
细说css中的background属性以及一些问题
苏苏就是小苏苏的博客
08-30 7697
1.background的属性 属性 background-color 属性设置元素的背景颜色。 这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。 transparent 值。尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。 background-positi
margin background_CSS之margin「收藏」
weixin_39883433的博客
11-28 131
0 前言当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子内容中推开。CSS1中描述了 margin-top、margin-right、margin-bottom和margin-left属性，以及一次设置所有四个属性的简写 margin。margin看起来是一...
css问题-设置子元素的margin background也跟着移动
yingzizizizizizzz的专栏
07-17 756
转自这里 一般就是给父元素设置overflow: hidden;即可解决问题，之所以出现这种情况的原因是：普通文档流盒子间，只要垂直外边距直接接触就会发生合并，合并后外边距视觉高度取两个发生合并外边距中较大者。发生这一现象的有三种情况：相邻兄弟块元素间、父元素及其首子元素和末子元素间（没有内边距或边框把外边距分隔开）、空块级元素自身的合并。...
background不能填充margin的问题
weixin_34015336的博客
01-06 681
CSS2 中有5个主要的背景(background)属性，它们是： background-color: 指定填充背景的颜色。background-image: 引用图片作为背景。background-position: 指定元素背景图片的位置。background-repeat: 决定是否重复背景图片。background-attachment: 决定背景图是否随页面滚动。 这些属...
CSS background-position的使用说明详解
09-25
背景图片的右下角和容器的右下角对齐，超出的部分隐藏，可以理解为background-positon: 100%, 100%，或者等同于容器宽度减去背景图片的宽度、容器高度减去背景图片的高度。 3. background-position: 500px 15px; ...
前端css基础篇（三） background背景元素position定位以及清除浮动的四种方法
qq_41363062的博客
01-05 1886
一、 background背景元素 1. background-color背景颜色 可以简写 background；默认值是transparent。（透明） 不能继承 2. background-image背景图片 可以简写background url（“图像的url路径地址”）图像的URL； none 表示背景上没有设置任何图像，这是默认值； inherit 指定背景图像应该从父元素继承 b...
Android布局与CSS的Flex布局的对应关系
郑海波(莫川)的CSDN博客
10-20 5008
@Author:莫川一、前言作为一个android开发者，使用xml写UI，实在是太方便了。最近学习Weex，需要使用css来布局。学成之后，发现使用CSS的Flex布局样式也非常方便。在css中，使用flex布局，需要添加display属性，当然，Weex默认使用的display属性就是flex。.box{ display: -webkit-flex; /* Safari */ displ
【CSS】关于background-position
Riptide
04-03 688
background-position 的取值 有几种情况（在此之前请先去阅读关于background-origin的信息） 关键字： center top right bottom left（可以用百分比转换) 长度值： 这个长度值解释为 从内边距区左上角的偏移。便宜点是背景图像的左上角。 background-position: 20px 30px; 说明背景图像的左上角这个点...
html框架代码背景图片,CSS3中background-image实现多背景图片（代码实例）
weixin_29439509的博客
06-07 1574
本文目标：1、掌握background-image多背景的实现问题：1、实现以下效果，使用纯DIV+CSS，必须使用background-image附加说明：1、整体宽度是1000px，高300px，要求页面居中显示2、背景图片宽，高均为300px3、每张图片都是当做背景图片来呈现的现在来具体操作1、准备素材：根目录创建images文件夹，把相关素材图片都存放与此，素材有2、创建好index.ht...
css——background、border、margin、float、content、blur（图片模糊）、user-select：none(禁用用户选择复制），border-image
肖的博客
08-13 601
1、background 缩写形式：background：color image repeat 关联方式 position； 关联方式（不常用）：background-attachment：scroll（随滚动条动）/fixed（不随滚动条动） 可同时设置背景图片和颜色，且图片会覆盖颜色 background-image：url（ ）选缓存小 可循环的图片平铺 优化性能 背景图片定位：b...
margin background_CSS设置margin-top失效及解决办法
weixin_39864387的博客
11-22 232
在web网站开发中，有时候我们给html元素设置的margin-top或margin-bottom属性，但是无效，并没有取到任何作用,这是什么原因呢?常出现两种情况：1、兄弟元素之间margin-top失效先看下面代码：<两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边距margin-top没有效果。网上能找到的两种比较靠谱的解释：1）：“在css2.1...
CSS中Margin的注意问题
qq_43623306的博客
05-23 773
Margin中有三种问题 一、同级塌陷 谁小塌陷到大的里面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...
CSS margin属性详解
man_tutu的博客
02-11 6864
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1-4个值。margin的默认值是0。没有继承性，也就是说给父元素设置的margin值并不会自动传递到子元素中。
一个我纠结很久的background和background-image关系区别问题
bluefish_flying的博客
12-06 3527
原文网址http://www.cnblogs.com/liu-l/p/3885630.html 也在做网页的时候遇到这个问题，看见作者讲解的很好很专业所以转载一下，为以后自己能够跟好的寻找和理解总结这些知识
CSS学习：关于background-position
zgqtxwd的专栏
04-30 411
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
CSS——CSS 背景应用
流楚丶格念的博客
06-29 4420
文章目录基本属性背景图片(image)背景平铺（repeat）背景位置(position)背景附着背景简写背景透明(CSS3)背景图方位案例 基本属性 CSS 可以添加背景颜色和背景图片，以及来进行图片设置。 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 background-position 背景位置 background-attachment 背景固定还是滚动 背景的合写（复合属性
margin-top塌陷问题的现象与解决
热门推荐
FreeSpider
05-26 1万+
margin-top塌陷问题 什么是margin-top塌陷 margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin-top塌陷的现象。 在未给子元素（绿色部分）添加margin-to...
css重点17：background-position和清除默认的margin和padding
小黄呀呀呀的博客
09-03 432
1、background-position 分两种情况: 重复【是整体位置的变化】 background:url('images/mess.png') repeat left center; 不重复【就是这个背景图在这个盒子里的位置】 background:url('images/mess.png') no-repeat left center; 2、清除默认的margin和padding【每次写的时候都要先把这个写出来！！】 *{ margin:0; padding:0; } ...
CSS 背景图片始终显示最中间的部分，不随窗口变化而收缩或变形。
peade的博客
08-23 1万+
div{ background-image: url(images/background.jpg); background-repeat: no-repeat; background-position: center; } 以上这个代码，可以让div的背景颜色始终显示中间部分，不随浏览器窗口的变化而收缩或变形。  ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值