当前位置: 主页 > 文章 > 经典文章 > >

纯div css规划 图片上题目文字背景半透皓 文字不

时间:2019-01-18来源:原创 作者:[db:作者]阅读:
  

  div css模块之图文规划,文字规划在图片上,而文字题目情节背景是半透皓的。div半透皓背景,文字不透皓在图片上规划模块。此雕刻边孤立和ul li列表两种情景下图文规划模块。特点纯div+css规划,无JS。

  css div图片上文字的背景半透皓规划模块

  孤立图文规划,图片上规划拥有文字情节,而文字情节背景是半透皓,却以瞧见半透皓后的情节图片,文字却不受半透皓影响。

  1、CSS代码

  .onlyimg{ position:relative;height:239px; width:378px}

  .onlyimg img{ position:absolute; left:0; top:0;height:239px; width:378px}

  .onlyimg h3{ position:absolute; left:0;bottom:0;background-color:rgba(0,0,0,.2);

  color:#FFF; width:378px;height:36px; line-height:36px; font-weight:bold}

  2、HTML代码:

  

  

thinkcss题目背景在图片上半透皓

  

  3、效实截图

  效实

  4、模块说皓

  采取了position定位属性,将装文字的h3标注签定位在图片下头对齐全处,同时采取设置h3背景色,同时设置背景色透皓度为0.2,由此违反掉落半透皓背景效实规划。

  background-color:rgba(0,0,0,.2)

  0 ,0 ,0此雕刻叁个洞代表是纯黑色RGB值,却以在PS绵软件里,RGB区别是0 0 0代表黑色。

  ps拾色器 RGB得到对应色

  ps拾色器 RGB得到对应色

  却以瞧见PS绵软件,拾色器把R G B区别输入0 0 0,违反掉落黑色#000000

  兼容主流动阅读器!

  1、说皓

  此雕刻边与上壹个孤立规划具拥有骈杂壹点,多了ul li列表标注签运用,运用ul li列表规划出产图文列表,而完成背景半透皓,文字不透皓不受透皓影响,依然是运用background-color:rgba(0,0,0,.2)完成。

  同时亦运用position定位属性将文字情节定位在图片情节上。

  2、对应DIV CSS模块CSS代码

  .onlyimg{ position:relative;height:239px; width:378px}

  .onlyimg img{ position:absolute; left:0; top:0;height:239px; width:378px}

  .onlyimg h3{ position:absolute; left:0;bottom:0;background-color:rgba(0,0,0,.2);

分享到:
最新评论 查看所有评论
加载中......
发表评论
用户名:(新注册) 密码: 匿名

栏目导航

推荐阅读

热门阅读