CSS背景图片padding的疑惑

最新推荐文章于 2022-10-13 09:49:43 发布

crz2020

最新推荐文章于 2022-10-13 09:49:43 发布

阅读量3k

点赞数 1

分类专栏：网络杂谈文章标签： css

本文链接：https://blog.csdn.net/crz2020/article/details/6125037

版权

网络杂谈专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS中background属性添加了图片或者背景颜色，这个背景图片或者背景颜色会为所设置的padding和width同时添加。如果图片比较小就会以左上角为原点放置·这个大家都知道的。

研究了好几天了终于搞懂CSS的和模型了，总有些细节问题能把人挡住，

还是实践出真知！

加油！CSS！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

crz2020

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

css揭秘--3灵活的背景定位

weixin_44580139的博客

11-26

259

灵活的背景定位文章目录灵活的背景定位难题难题在针对容器的某个角对背景图片

css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题

Cien

06-09

3006

sprite背景图优化，通过设置css3 background-size来压缩大图达到高清效果，来解决H5网页在手机浏览器下图标模糊的问题。

参与评论您还未登录，请先登录后发表或查看评论

css中如何使用padding代替高度实现背景图片高度按比例自适应

闫小样丶的博客

09-27

1398

我们在做项目的过程中，常常需要将一些图片做成背景图。但是在页面缩放的时候，会发现背景图并没有自适应去缩放。我在做项目的过程中也同样遇到了这个问题，查了一些资料发现通过padding可以实现背景图片高度按比例自适应。首先大概说一下原理：（1）高度百分比我们将高度设置成百分比时，其中的高度是基于父元素来定的，设置成50%，就是将该元素高度设置成父元素的高度值*50%。但是高度设置为百分比时...

css去除padding部分的背景颜色的方法

meteoite的博客

08-23

8049

css除去padding部分的背景颜色在网页中，如果给一个元素设置一个背景颜色，其背景会默认铺满整个元素（包括border和padding），这时我们可以使用background-clip来控制背景的蔓延。 1.background-clip：border-box border-box是默认的显示状态，如图所示，border和padding下都被背景颜色所填充 2.background-clip：padding-box padding-box控制背景延伸至padding外沿。如图，border下没

【CSS】盒子模型、内边距、背景设置_03

青春木鱼的博客

10-13

2327

内边距是边框到内容区域之间的距离，内边距有颜色，就是当前元素的背景颜色，改变内边距，感觉上是元素变大了，但其实是元素占地空间变大，内容区域并没有改变

background

火火的专栏

03-27

471

css3中background的几个属性（goole测试） background-clip（规定背景的绘制区域）background-clip: border-box|padding-box|content-box; border-box：背景被裁剪到边框盒。 padding-box：背景被裁剪到内边距框。 content-box：背景被裁剪到内容框。//只在内容区域显示 js语法：object.s

CSS在使用中的高级技巧(在实战中会用到)

09-22

为CSS选择符添加注释，可以在日后的维护中提供帮助，避免出现“为什么要这样编写”的疑惑。但是，注释也应该适度，避免过度堆叠选择符和注释，以免造成代码混乱。八、背景图片与文字颜色搭配为了保证在背景图片...

CSS的各属性

MaNong125的博客

01-02

522

目录 1.padding 1.单独设置各边框边距: 2.使用 padding:参数 1.padding css中的padding属性在建设一个网站的页面时是非常重要的，它会直接和你整个页面的效果挂钩。padding主要用来设置对象的四个边的边距是多少，很多初学者在这里会有疑惑，有时候padding里面有两个参数，有时有三个参数，会疑惑到底代表什么意思。这里给出解答： padding有两种设置方式： 1.单独设置各边框边距: padding-top 上内边距的宽度

css实现抽屉联动仿

jianbangwie520的博客

10-26

234

纯 CSS 实现抽屉联动仿点它可看原网的好吗大哥? (￢∀￢)σ : batman-3d 网站实现其中抽屉联动效果你可以从这里下载源代码首先结构创建加上样式，样式的原理是后一个元素覆盖上前一个兄弟元素宽度的一半图片的实现效果是 sprite 技术／雪碧图.drawer{ padding: 12px; overflow-x: hidden; } .drawer ul{ position: relative;

css实现盒子的双层阴影效果

Tangsze的博客

11-21

1137

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...

CSS_padding

dolola的博客

01-23

400

和margin的区别在于padding可以有背景色而后者不可以,不过padding的颜色不是它自己的，而是来自他包裹的元素的。同样有padding-left:20px;

认识padding

fuxiaomi2016的博客

10-10

765

padding就是内边距，padding的区域有背景颜色，在css2.1前提下，padding的背景颜色一定和内容区域相同，也就是说，background-color将填充所有border以内的区域。在css2.1中，我们可以使用div嵌套来实现颜色不同。 padding有4个方向： padding-top:20px; /*上*/ padding-right:20

CSS实现背景图片详解&&全屏铺满自适应的方式

热门推荐

weixin_46433689的博客

05-30

1万+

问题: CSS实现背景图片全屏铺满自适应的方式解决：（1）background-image:可添加多张背景图片。参数：url() || none(默认) background-image: url(images/scroll_top.jpg), url(images/scroll_bottom.jpg), url(images/scroll_middle.jpg);

盒子使用margin或padding后与背景颜色的联系：

weixin_54681929的博客

04-29

6396

我们在学习前端的时候，一定会遇到这样的问题：当我们给盒子设置了宽度、高度以及背景颜色时，这个时候在给它添加padding和margin的属性值，会有什么不一样吗？先简单通俗地介绍一下这两个属性： padding可以理解为内容与边框的距离； margin 可以理解为边框与其他元素的距离。最重要的是：这两者都会撑大我们的盒子！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt

padding对背景图片位置的影响

xyy_html的博客

04-29

1809

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 800px; height: 800px; background...

Css 如何使纯颜色/背景图自适应的铺满全屏

ANNaScripter的博客

01-09

1万+

Css 如何使纯颜色/背景图自适应的铺满全屏

background---背景颜色和背景图片填充的范围

JiM-W 的博客

12-14

1万+

border background 填充：content+padding+ border

CSS背景图片定位实现菜单特效

"css 背景图片定位在菜单效果中的应用实例，通过改变HOVER状态下的背景图片位置实现菜单效果。" 在这个实例中，主要探讨了如何利用CSS背景图片定位来创建一个具有动态效果的菜单。这个菜单的独特之处在于，当用户...