CSS怎么样让背景图片水平(垂直)居中

 我来答
Achille_sfly
推荐于2016-03-05 · TA获得超过181个赞
知道答主
回答量:128
采纳率:100%
帮助的人:65.5万
展开全部
CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置。
你要水平居中可以:
div{background-position:center center}//第一个center是水平居中,第二个center是上下居中

CSS(层叠样式表)级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言
爱撸猫的前端工程师
2019-07-26 · 专注前端开发。擅长css动画效果
爱撸猫的前端工程师
采纳数:100 获赞数:258

向TA提问 私信TA
展开全部

1.使用css的background-position属性设置背景的位置,下面是demo实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body class="bodybg">
<h2>针对当前div层背景居中</h2>
<h3>ps:背景图片是需要高度和内容撑开的。没有高度没有内容,背景图片是无法显示的</h3>
<div class="bgImg">
</div>
</body>
<style type="text/css">
.bgImg{
background: url(images/2.png) center no-repeat; /* 这个是简写,可以分开写 */
/* background-position: center center; */
/* background-image: url(images/2.png); */
/* background-repeat: no-repeat; */
width: 200px;
height: 200px;
border: 1px solid #000000;
}
.bodybg{

background: url(images/2-1.png) center no-repeat;
height: 100vh; /*  一屏高度的表示*/
}
</style>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
卞是云4621
推荐于2016-03-15 · 超过53用户采纳过TA的回答
知道答主
回答量:107
采纳率:100%
帮助的人:102万
展开全部
:no-repeat为背景图不重复,最好是满足1280宽度的分辨率下位满屏,图片可以宽度为1280像素,第一个center为水平居中,第二个center为垂直居中,第二个center换成top也就是顶部显示背景图。
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
kawinl
2018-02-27 · TA获得超过601个赞
知道小有建树答主
回答量:407
采纳率:50%
帮助的人:200万
展开全部
ps?cs?css?
移动工具的选项栏有居中按钮,要两个图层选择才能启用。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2019-05-15
展开全部
background: url(../images/1.png) no-repeat center center;
background-size: contain;
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(4)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

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

类别

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

说明

0/200

提交
取消

辅 助

模 式