当前位置:  开发笔记 > 前端 > 正文

使用CSS移动前景图像

如何解决《使用CSS移动前景图像》经验,为你挑选了1个好方法。

我正在尝试使用CSS移动前景图像,因此它与背景图像重叠一点.我似乎无法让前景图像移动到任何地方,我只是无法弄清楚我做错了什么.谁能指出我正确的方向?看我的小提琴.

HTML:


CSS:

body{
 background: black;
}
.background{
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
.frontImg{
  position: absolute;
  left:200;
  top:500;
  z-index: 1;
}

Sebastian Br.. 6

您缺少高度和宽度的单位(%,em,px等) .frontImg

body{
  background:black;
}
.backgroundImg {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
.frontImg{
  position:absolute;
  left:200px;
  top:100px;
  z-index: 1;
}

另外,您可以进行一些优化:您可以将css从样式属性移动到css文件,以获得没有任何内联css的干净html结构.

我认为你的CSS上有一个拼写错误 - 取而代之的.background.backgroundImg.



1> Sebastian Br..:

您缺少高度和宽度的单位(%,em,px等) .frontImg

body{
  background:black;
}
.backgroundImg {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
.frontImg{
  position:absolute;
  left:200px;
  top:100px;
  z-index: 1;
}

推荐阅读
N个小灰流_701
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有