CSS 背景透明效果的实现_html/css_WEB-ITnose

WBOY

Freigeben： 2016-06-24 11:48:52

Original

1061 Leute haben es durchsucht

描述不清楚这种效果，直接上图，无图无真相

图中那个表单效果怎么实现呢？

回复讨论(解决方案)

input{opacity: 0.8;}

我给input、textarea加了

opacity:value

Nach dem Login kopieren

属性。但是无法达到那种，表单内容透明，而其他部分不透明。
这里需要考虑三个层：
1、那张透明的背景图
2、蓝色的背景
3、表单输入框的透明效果

现在比较混乱的是如何摆放这三层。。。

<div class="d1">  <div class="d2">  <form>  <input/>  </form>  </div></div><style>  .d1{background:url(http://static.csdn.net/public/common/toolbar/images/f_icon.png)}.d2{opacity: 0.8;background:#00f;width:100%;height:200px;text-align:center;opacity:0.7;}  input{background:rgba(255,255,255,200);}</style>

Nach dem Login kopieren

用PNG图片.

Verwandte Etiketten：

CSS 背景透明效果的实现

Quelle：php.cn

Vorheriger Artikel：css3.0在线制作工具_html/css_WEB-ITnose Nächster Artikel：说一个Sublime Text 2插件、emmet（原名：zen Coding)_html/css_WEB-ITnose

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors