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

来源:4-3 编程练习

Lesley王

2020-07-26 17:45:27

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title>4-3</title>

<style>


.main{

width: 100%px;

height: 4033px;

background-image: url(http://climg.mukewang.com/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://climg.mukewang.com/5a3383c70001f1b702240364.png">

</div>


<div class="left">

<img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png">

</div>


</div>

</body>

</html>


写回答

2回答

好帮手慕言

2020-07-26

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

http://img.mukewang.com/climg/5f1d6030099e150d03770143.jpg

祝学习愉快~

1

好帮手慕言

2020-07-26

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

http://img.mukewang.com/climg/5f1d5a2409ab020305650327.jpg

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

1
hesley王
h 为什么设置 width: 100%;height: 100%;  背景图就不显示了呢?
h020-07-26
共1条回复

0 学习 · 40143 问题

查看课程