Question

我有一个带边框属性的textarea：

#my_textarea{
    border-color: #EEEEEE;
    border-style: solid;
    border-width: 2px;
    width: 95%;
    min-height: 550px;
    padding: 30px;
    margin-top: 28px;
    /* Text style */
    font-family: Times-Italic;
    font-size: 19px;
    color: #717171;
    line-height: 27px;
    text-align: left;
    resize: none;
  }

我希望此textarea中的文字具有不透明度。但是当我设置opacity: 0.5;时，它也会影响边框。

如何仅在opacity内的文字而不是文字+边框设置textarea？

Answer 1

只需使用RGBA文字颜色

color: rgba(113,113,113,0.5);

body {
  background: lightgreen;
}
#my_textarea {
  border-color: #EEEEEE;
  border-style: solid;
  border-width: 2px;
  width: 95%;
  min-height: 100px;
  padding: 30px;
  margin-top: 28px;
  /* Text style */
  font-family: Times-Italic;
  font-size: 19px;
  color: rgba(113, 113, 113, 0.5);
  line-height: 27px;
  text-align: left;
  resize: none;
}

<div id="my_textarea">
  <p>Lorem ipsum dolor sit amet.</p>

</div>

Answer 2

为RGBA使用color值可以解决您遇到的问题。

以下是一个例子。

＆＃13;

body {
  background: red;
}
#my_textarea {
  border-color: #EEEEEE;
  border-style: solid;
  border-width: 2px;
  width: 95%;
  min-height: 550px;
  padding: 30px;
  margin-top: 28px;
  font-family: Times-Italic;
  font-size: 19px;
  line-height: 27px;
  text-align: left;
  resize: none;
  color: rgba(113,113,113, 0.5);
  background: transparent;
}

＆＃13;

<textarea id="my_textarea">Lorum Ipsum</textarea>

＆＃13;

Generator

Answer 3

扩展@Paulie_D所说的你应该将不透明度设置为文本的rgba颜色：

#my_textarea{
    rgba(113, 113, 113, 0.5); //instead of #717171
}

还有一个漂亮的hex-＆gt; rgba color converter

Answer 4

补充其他答案的替代解决方案，对于IE8（如果需要 - 因为它不支持RGBA）将在textarea周围有一个包装元素并使用opacity而不是RGBA颜色：

body {
  background: red;
}
.foo {
  border-color: #EEEEEE;
  border-style: solid;
  border-width: 2px;
}
#my_textarea {
  width: 95%;
  min-height: 550px;
  padding: 30px;
  margin-top: 28px;
  font-family: Times-Italic;
  font-size: 19px;
  line-height: 27px;
  text-align: left;
  resize: none;
  background: transparent;
  color: #717171;
  opacity: 0.5;
}

<div class="foo">
  <textarea id="my_textarea">Lorum Ipsum</textarea>
</div>

CSS - textarea上的不透明度：文本但不是边框

4 个答案: