CSS3-css 浮动问题?

前端开发 前端开发 主题:1148 回复:2395

CSS3-css 浮动问题?

夜无邪 发布于 2017-05-08 字数 252 浏览 1103 回复 3

图片中下方实现问题:

  1. 怎么实现一个元素在另一个元素上面,要用css什么技术?
  2. 怎样做的这个元素透明?
  3. 不用支持ie6

请输入图片描述

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(3

浮生未歇 2017-09-24 3 楼

一个元素在另一个上面可以相对定位,或者直接被包含在这个元素的里面,还可以绝对定位,有时候需要调整index使其在背景元素上面
透明问题:
opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持firefox, Safari和 Opera.
filter:alpha(opacity=50); 这个是为IE6设的,可取值在0-100,其它三个0到1.
-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。

虐人心 2017-09-12 2 楼

1.如果是我的话,图片区域用position:relative,文字区域用position:absolute,而且文字是图片div的子div,这样文字区域就可以相对于图片定位了,不一定要用到z-index,因为如果只是要实现你给出的效果的话,子元素本身就会显示在父元素之上,我不推荐使用了定位就要配合z-index,因为默认的设置已经可以达到很多效果了(比如子元素会显示在父元素之上,html代码里面位置靠后的会显示在更上层),有必要的时候再用z-index,不然以后维护的时候层次太乱,不好改
2.其实还有一种用的比较少的用法就是负margin,把margin值设为负值,也可以该在其他的元素上方,不过这种方法大多用在实现某些特效,或者大块的布局上,如果用在上面的例子中,将会导致文字区域的margin计算要重新算,要加上负值
3.透明度的问题我的答案和上面是一样的,ie用滤镜,其他的直接用opacity就可以了,希望可以帮助到你

清晨说ぺ晚安 2017-07-18 1 楼

不解释,直接贴代码吧:
css:

<style>
.boxit { width:500px; height:200px; position:relative; border:#ccc 1px solid; background:url(http://img.1mobile.com/t/img/2011-10/1319521110.jpg) no-repeat; overflow:hidden}
.boxit .init { width:500px; height:40px; position:absolute; bottom:0px; left:0px; border:#fff 1px solid;opacity: 0.5; background-color:#000;}
.boxit .initnews { color:#fff; width:500px; height:40px; position:absolute; bottom:0px; left:0px; border:#fff 1px solid;}
</style>
html:

<div class="boxit">
<div class="init"></div>
<div class="initnews">You can write words in this area.</div>
</div>