图片根据div大小变化 如何让div的大小随着背景图片的大小变大

在做网页的时候,经常会遇到为div添加背景图片,那么我们应该怎样做才能让div的大小随着背景图片的变大而变大呢,也就是让我们的div被背景图片所撑起来。具体请看下面小编介绍的操作方法!

让div的大小随着背景图片的大小变大的方法

首先,我们需要新建一个htm页面,并在页面中写上一个div。并为div添加背景图片,为背景图片添加一些基本的样式。

然后,我们按下键盘上的F12,查看其在浏览器中的效果。效果肯定是页面中没有相应的背景图片,理由是我们做的是背景图片,无法将div撑起一定的高度。

图片根据div大小变化 如何让div的大小随着背景图片的大小变大

既然不能撑起来,我们也不能单纯的为div设置高度,这样无法解决不同大小背景图片的问题,我们可以利用css中的伪元素::after或者::before

可以简单的解释一下,利用伪元素是将指定标签的前面或者后面的内容设为空,并设成块元素,并设定以百分比为单位的padding-bottom或者padding-top。以此撑开这个div。

另一种方法是,我们在有背景图片的div的内部再套一个div,然后为这个内部的div添加相应的样式,使得外层div可以被撑起来。

这里我采用的是和第一个相同的做法,为这个内部div设定内部边距上或者下都可以。同样是以百分比作为单位。这样我们再次在浏览器中查看,就可以看到作为背景的图片了。

最后告诉大家一些注意事项,不管我们采用方法一还是方法二,都是设置的上下的内边距而不是外边距,并且要以百分比作为单位。

  

爱华网本文地址 » http://www.aihuau.com/a/238761/39048828.html

更多阅读

如何高效的管理时间 如何让管理变得高效?

     在职场中有那么一群人,他们是“空中飞人”,终日穿梭于各大城市;他们是“会议达人”,成天在“文山会海”里挣扎;他们是名符其实的大忙人,大小事务都要亲力亲为……同时,他们也是外人眼中光鲜得体、高高在上的企业高管。究竟,他们是

美容院消费者分析 如何让消费者信任您的美容院

   如何让消费者信任你的美容院是一个当前令消费者最为关注的问题,因为信任是美容消费者的前提,信任是质量和服务的保障,没有信任一切无从谈起。消费者不会信任一家卫生设施不完备、条件差、证照不齐、人员文化素质低下的美容院。

绩效考核指标如何量化 新的一年,如何让绩效考核更有效

  新年伊始,人们开始总结过去的一年,谋划新的一年。其中最让人关心的莫过于绩效考核,因为它涉及到每个人的切身利益。据一份资料显示,我国有高达70%以上的企业认为绩效考核没有达到预期效果或效果不好,实际上可能比这一比例还要高。尽

怎样让仙客来集中开放 仙客来花,如何让仙客来多开花?

仙客来花非常漂亮,迎来无数的赞誉和欣赏的眼光,这也是我们室内种植仙客来花的原因,大家在种植仙客来花的时候都希望仙客来多开花,这样就能欣赏到更多的鲜花。那么,如何让仙客来多开花呢?下面由小编给大家介绍让仙客来多开花的技巧。>>点

word页面设置横向页码 如何让Word页码从指定的页面开始设置

如何让Word页码从指定的页面开始设置――简介 许多大学生在写毕业论文的时候往往会遇到这样一个问题,论文的第一页为标题简介,第二页目录,第三页才正式开始,所以前两页更本不需要页码,我们只需要将Word页码从第三页开始显示,但是Word中的

声明:《图片根据div大小变化 如何让div的大小随着背景图片的大小变大》为网友爱情丶后八轮分享!如侵犯到您的合法权益请联系我们删除