HTML / CSS에서 텍스트 투명도를 변경하는 방법은 무엇입니까?

112

저는 HTML / CSS를 처음 접했고 일부 텍스트를 50 % 투명하게 표시하려고합니다. 지금까지 완전한 불투명도로 텍스트를 표시하는 HTML이 있습니다.

<html><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>

그러나 불투명도를 변경하는 방법을 모르겠습니다. 온라인에서 찾아 보려고했지만 내가 찾은 코드로 정확히 무엇을해야할지 모르겠습니다.

html  css  opacity 
— Nosrettap
소스

답변:

268

opacity전체 요소에 적용되므로 해당 요소에 배경, 테두리 또는 기타 효과가있는 경우 해당 요소도 투명 해집니다. 당신이 경우 에만 할 텍스트는 사용을 투명하게합니다 rgba.

#foo {
    color: #000; /* Fallback for older browsers */
    color: rgba(0, 0, 0, 0.5);

    font-size: 16pt;
    font-family: Arial, sans-serif;
}

또한 멀리, 멀리 <font>. 이를위한 CSS가 있습니다.

— Mattias Buelens
소스
8
받아 들여진 답변 인 IMO에 비해 훨씬 우수한 솔루션입니다. 텍스트에만 불투명도를 적용하기 위해 HTML에 추가 범위 요소를 추가 할 필요가 없습니다.
— kinsho
이것이 해결책입니다.
— GhitaB 2014
이런 의미에서 "오래된"브라우저는 무엇입니까?
— Rick Davies
1
@RickDavies caniuse.com 에 따르면 IE9 이상이 필요합니다. IE8을 지원해야하는 경우에도 폴 백이 필요합니다. 그렇지 않으면 rgba.
— Mattias Buelens 2015 년
흠, 둘 다 불투명도 속성이 아닙니다. 와.
— trusktr 2015 년
105

확인 불투명도 , 당신은 DIV이 CSS 속성을 설정할 수 있으며, <p>또는 사용하여 <span>투명하게 만들

그건 그렇고, font 태그는 더 이상 사용되지 않습니다 . css를 사용하여 텍스트 스타일을 지정하십시오.

div {
    opacity: 0.5;
}

편집 :이 코드는 ** 텍스트 만 만들고 싶다면 전체 요소를 투명하게 만들 것입니다 ** 투명 확인 @Mattias Buelens 답변

— 마리오 코르 체로
소스
16
루크!
— pilau
20
이 대답은 틀 렸습니다. 코드는 전체 요소 (div)를 반투명하게 만듭니다. 질문은 텍스트 만 지정했습니다. 더 높은 득표를 한 형제 자매 대답 이 받아 들여 져야합니다.
— Basil Bourque
감사합니다. 워드 프레스 템플릿에 텍스트를 숨기는 데 정말 도움이되었습니다. (opacity : 0.5;) 대신 방금 (opacity : 0;)을 사용했습니다.
— Marcielli Oliveira
17

rgba태그를 텍스트 색상으로 사용하십시오 . 을 사용할 수 opacity있지만 텍스트뿐만 아니라 전체 요소에 영향을 미칩니다. 테두리가 있다고 가정하면 투명하게 만들 수 있습니다.

.text
    {
        font-family: Garamond, serif;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
    }
— 해리 에스코트
소스
9

가장 좋은 해결책은 요소의 "불투명도"태그를 보는 것입니다.

예를 들면 :

.image
{
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

따라서 귀하의 경우에는 다음과 같이 보일 것입니다.

<html><span style="opacity: 0.5;"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>

그러나 태그는 HTML5에서 지원되지 않는다는 것을 잊지 마십시오.

CSS도 사용해야합니다. :)

— MajuiF
소스
5

css opacity속성은 어떻습니까? 0에 1값.

그러나 "font"보다 더 명시적인 dom 요소를 사용해야 할 것입니다. 예를 들면 :

<html><body><span style=\"opacity: 0.5;\"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></span></body></html>

추가 정보로 html 요소 외부에서 CSS 선언을 사용하는 것이 좋지만 font html 태그 대신 font css 스타일을 사용하는 것이 좋습니다.

크로스 브라우저 css3 스타일 생성기의 경우 http://css3please.com/ 을 참조 하십시오.

— Sebas
소스
3

쉬운! 후 :

    <font color=\"black\" face=\"arial\" size=\"4\">

이것을 추가하십시오 : 

    <font style="opacity:.6">

1과 0 사이의 10 진수로 ".6"을 변경하면됩니다.

— user3067297
소스
3

더 없다 CSS의 당신이 단지 변경되지 않습니다 CSS 불투명도 속성을 사용하려고 할 경우 다른 한편으로는, 자식 요소에 영향을주지 않고 요소의 배경의 불투명도 또는 투명도를 변경하는 경우에만 사용할 수있는 배경 불투명도와 같은 속성은 배경의 불투명도이지만 모든 하위 요소의 불투명도도 변경합니다. 이러한 상황에서는 색상 값의 일부로 알파 투명도를 포함하는 CSS3에 도입 된 RGBA 색상을 사용할 수 있습니다. RGBA 색상을 사용하여 배경 색상과 투명도를 설정할 수 있습니다.

— 이몬
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.