【问题标题】:Adjust opacity of a forms background without changing the input在不更改输入的情况下调整表单背景的不透明度
【发布时间】:2012-09-04 11:31:49
【问题描述】:

我正在尝试为我网站上的一个表单重新创建类似this 的内容,方法是使用不透明度使表单字段背景只有 20% 可见,但是当我这样做时,它也会影响内部的文本,以及当您输入内容时。如何使不透明度仅应用于背景?

【问题讨论】:

    标签: css opacity


    【解决方案1】:

    不透明度将始终影响所有包含的(子)标签。您可以在背景中放置具有所需颜色和 20% 可见性的 1px png 图像(或者,如果那里有一些图像,而不是纯色 - 更改整个图像的 alpha)。看起来这就是你所需要的(我终于明白我应该看图片而不是你的链接提供的网站设计))

    另一种选择是使用 css 位置、z-index 等将一些不透明的 div 放在其他标签下方。但在这种情况下,应该有一个,例如,包含所有不应透明内容的 div 和另一个 div附近不透明

    【讨论】:

    • 如何更改整个图像的 alpha?我做了一个 1px 白色背景,但我不知道如何将不透明度应用于背景。如果我使用 opacity 属性,它会使其全部变为不透明,并且我看不到我的文本。
    • 取决于您的工具。我正在使用 GIMP 来处理图像。但这不是我的强项。即使我做了几次这样的事情,我也不能说怎么可能做到这一点)但在我看来,你误解了我的意思。该 1px 图像已经必须是透明的。而且比你不需要放任何不透明度。只是具有所需颜色的透明 PNG
    【解决方案2】:

    为字段指定不同的类并为字段设置不透明度 100%

    【讨论】:

    • 这行不通。所有子元素都将具有与父 div 相同的不透明度。字段必须位于 opactiy 100% 可见的元素之外。
    • @FAngel 感谢您的评论
    猜你喜欢
    • 2017-11-08
    • 2016-10-19
    • 2019-05-03
    • 2014-06-08
    • 2012-09-20
    • 2017-03-17
    • 1970-01-01
    • 2013-03-04
    • 2021-10-08
    相关资源
    最近更新 更多