css如何使div背景图片填充

 我来答
轻烟谈生活
高粉答主

2019-04-20 · 轻烟和你聊聊生活中的有趣事
轻烟谈生活
采纳数:7 获赞数:116655

向TA提问 私信TA
展开全部

css使div背景图片填充的具体操作步骤如下:

1、我们首先打开前端开发工具,新建一个html代码页面。

2、在html代码页面上创建一个用于设置背景颜色的div标签,然后给这个标签添加上class = "bg-img"。

3、设置背景图片,创建style标签,然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。

4、保存html代码,使用浏览器打开,这个时候会发现浏览器上的背景图片显示在左上角。

5、回到html代码页面,在bg-img类里添加background-position: center的属性。

6、保存html代码后重新刷新浏览器,这个时候会发现浏览器上的背景图片已经自动居中了。

博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具,它提供了4种AI制作PPT的方式,包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼word文档生成PPT,一站式集成多种AI生成PPT的方式,可满足办公用户的不同需求和使用场景... 点击进入详情页
本回答由博思aippt提供
小函娄B
2013-12-13 · 超过26用户采纳过TA的回答
知道答主
回答量:123
采纳率:0%
帮助的人:59.1万
展开全部
首先得看你需要的背景图片与DIV的尺寸是否一致,如果一致就可可以在CSS样式里面加个属性 background:url(图片路径/图片名) no-repeat;图片名的带上后缀,比如.jpg、.gif、.png等;也可以加成 background-image:url(图片路径/图片名) no-repeat;效果一样,起始也就是一回事,前面的是简写。
如果背景图的尺寸与DIV的尺寸不一样,那么就得考虑背景图是否需要铺满DIV,就得把no-repeat改为repeat,或者只在DIV的某一处显示,这样就得在no-repeat后面跟上位置参数,background:url(图片路径/图片名) no-repeat 距离左边的距离 距离上边的距离;只是使用的背景精灵技术。
具体你不明白的就Hi我;这个这样说页不是那么好理解的,实际把上面属性的文字换成你需要的值会更好理解,一点就明。
有问题Hi我。
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
手机用户91398
推荐于2017-09-22 · TA获得超过588个赞
知道答主
回答量:129
采纳率:0%
帮助的人:154万
展开全部
首先你需要保证背景图片的比例与 div 一致,然后再给 div 加上:background-size: cover; -moz-background-size: cover; 应该就可以了。
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
机车强
2013-12-13
知道答主
回答量:19
采纳率:0%
帮助的人:9.4万
展开全部
添加的div的width,height和图片的一样大小,然后在css里该div属性下设置background-image:url(images/图片名字.jpg)

比如;
图片尺寸大小:1.jpg 1000*300
HTML代码: <div class="container">随便乱写几个字</div>
CSS属性: .cotainer{
margin:0 auto; //居中展示
width:1000px;
height:300px;
background-image:url(1.jpg);
}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式