关于背景,老师请问如何设置背景使其按照视口等比例显示?

关于背景,老师请问如何设置背景使其按照视口等比例显示?

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title>4-3</title>

<style>


.main{

width: 100%px;

height: 4033px;

background-image: url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png);

position: relative;

margin:0px;

padding: 0px;

}

.right{

width: 224px;

height: 324px;

position: fixed;

right: 0px;

top:50%;

margin-top: -162px;

}

.left{

width: 224px;

height: 324px;

position: fixed;

left: 0px;

top:50%;

margin-top: -162px;

}



</style>

</head>

<body>

<div class="main">

<div class="right">

<img src="http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png">

</div>


<div class="left">

<img src="http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png">

</div>


</div>

</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学,设置百分比是相对于父级来计算的。如果类名为main的元素的高度设置100%,那么需要给body和html设置高度,例如:

http://img1.sycdn.imooc.com//climg/5f1d6030099e150d03770143.jpg

祝学习愉快~

好帮手慕言 2020-07-26 18:25:55

同学你好,可以设置background-size属性,例如:

http://img1.sycdn.imooc.com//climg/5f1d5a2409ab020305650327.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 提问者 Lesley王 #1
    为什么设置 width: 100%;height: 100%;  背景图就不显示了呢?
    2020-07-26 18:31:15
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师