请问一定要设置背景图的宽高吗，我没有设置背景图的宽高代码效果也一样
来源：2-21 自由编程
慕仙1405838
2021-03-09 23:25:30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>心动动画</title>
<style>
.box {
width: 200px;
height: 200px;
border: 2px solid black;
position: relative;
}
.box>div {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
background: url(images/xin.png) no-repeat center center;
animation: love 1s linear 0s infinite;
}
@keyframes love {
from {
opacity: 1;
}
to {
opacity: 0;
transform: scale(1.5);
}
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
</body>
</html>
1回答
-
好帮手慕久久
2021-03-10
同学你好，是给背景图所在的元素设置宽高，并不是给背景图自身设置宽高，如下：
同学给“心”所在的div设置了宽高，所以会有效果：
如果不给该div设置宽高，则会没有效果。同学可以把.box>div的宽高去掉试试。
原因是背景图是依附在元素上的，如果元素本身就没有宽高，那么元素就看不见，元素都看不见，背景图就肯定看不到了，所以一定要保证元素有宽高，这样背景图才能被看到，因此要给元素设置宽高。
另外，同学的效果不正确，应该是有两层“心”：
所以需要给.box也设置上背景图：
祝学习愉快！
0
相似问题
回答 1
回答 1