一张图片在背景图中居中显示

1.知识点:
(1)图片水平居中显示https://zhidao.baidu.com/question/537179073.html
在这里插入图片描述
看这个的回答   我用的是第二种方法

(2)有关于background属性的知识点:http://css.doyoe.com/(这个是css参考手册 打开页面后按Ctrl+F 然后在搜索框搜索background按Enter键即可查找)

2.实现
< !DOCTYPE html>
< html lang=“en”>

< head>
< meta charset=“UTF-8”>
< meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
< title>Document< /title>
< style>
.parent {
width: 100%;
height: 400px;
border: 1px solid red;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: left top;
/* 将元素宽度设置为100% 则背景图像使用background-size设置为cover 覆盖全部 */
background-size: 100% 100%;
position: relative;
}
img {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}

< /style>
< /head>

< body>
< div class=“parent”>
< img src=“2.jpg” alt="">
< /div>

< body>

< /html>

结果:
在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值