html - img - opacity 뜻




CSS를 사용하여 텍스트 나 이미지에 투명한 배경을 부여하려면 어떻게합니까? (18)

다음 예제와 같이 CSS를 사용하여 rgba color code 할 수 있습니다.

.imgbox img{
  height:100px;
  width:200px;
  position:relative;
}
.overlay{
  background:rgba(74, 19, 61, 0.4);
  color:#fff;
  text-shadow:0px 2px 5px #000079;
  height:100px;
  width:300px;
  position:absolute;
  top:10%;
  left:25%;
  padding:25px;
}
<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>

CSS 만 사용하여 요소의 background 을 반투명으로 만들 수 있지만 요소의 내용 (텍스트 및 이미지)은 불투명하게 할 수 있습니까?

텍스트와 배경을 별도의 두 요소로 사용하지 않고이 작업을 수행하고 싶습니다.

시도 할 때 :

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

자식 요소가 부모의 불투명도를받는 것처럼 보입니다. opacity:1opacity:0.6 와 관련이 있습니다 (부모의 opacity:0.6 ).


CSS3는 문제를 쉽게 해결할 수 있습니다. 용도:

background-color:rgba(0,255,0,0.5);

여기서 rgba는 빨강, 녹색, 파랑 및 알파 값을 나타냅니다. 녹색 값은 255이므로 0.5 투명도는 0.5 알파 값으로 얻습니다.


RGB (63,245,0)의이 색상 코드와 같은 불투명도의 RGB 색상을 사용할 수 있으며 (63,245,0,0.5)와 같은 불투명도를 추가하고 RGBA 대체 RGB를 추가 할 수 있습니다. 불투명도 사용

div{
  background:rgba(63,245,0,0.5);
  }


가장 쉬운 방법은 반투명 배경 PNG 이미지 를 사용하는 것입니다.

필요한 경우 JavaScript를 사용하여 Internet Explorer 6 에서 작동하게 할 수 있습니다.

Internet Explorer 6의 투명 PNG에서 설명한 방법을 사용합니다.

그 이외의,

당신은 two side-by-side sibling elements 사용하여 그것을 가짜로 만들 수 two side-by-side sibling elements - 하나는 반투명 하게 만들고 다른 하나 absolutely position the other over the top .


그라디언트 구문을 사용하여 (ab)로 Internet Explorer 8 에서이 문제를 해결할 수 있습니다. 색상 형식은 ARGB입니다. Sass 전처리기를 사용하는 경우 내장 함수 "ie-hex-str ()"을 사용하여 색상을 변환 할 수 있습니다.

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";

나는 보통이 수업을 내 작업에 사용한다. 그것의 꽤 좋다.

.transparent {
  filter: alpha(opacity=50); /* internet explorer */
  -khtml-opacity: 0.5;      /* khtml, old safari */
  -moz-opacity: 0.5;       /* mozilla, netscape */
  opacity: 0.5;           /* fx, safari, opera */
}


다음은이 작업을 수행하는 방법입니다 (최적은 아니지만 작동 할 수 있음).

반투명하게 만들 div 를 만듭니다. 클래스 / ID를 지정하십시오. EMPTY로두고 닫으십시오. 높이와 너비를 설정하십시오 (예 : 300 x 300 픽셀). 0.5의 불투명도 또는 원하는 것과 배경색을 지정하십시오.

그런 다음 해당 div 바로 아래에 다른 클래스 / ID로 다른 div를 만듭니다. 그 안에 텍스트를 배치 할 단락을 만듭니다. div 위치에 relative, top : -295px (즉, 295 픽셀)를 지정합니다. 좋은 측정을 위해 Z- 인덱스를 2로 지정하고 불투명도가 1인지 확인하십시오. 단락을 원하는대로 스타일을 지정하십시오. 그러나 단락이 첫 번째 div 보다 작아서 오버플로가 발생하지 않도록하십시오.

그게 전부 야. 코드는 다음과 같습니다.

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}
<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>

Safari 2.x에서 작동하며 Internet Explorer에 대해 잘 모릅니다.


동일한 div의 이미지 위에 오버레이를 배치하는 더 쉬운 솔루션이 있습니다. 이 도구의 올바른 사용법은 아닙니다. 그러나 CSS를 사용하여 그 오버레이를 만드는 것이 매력적입니다.

다음과 같이 삽입 그림자를 사용하십시오.

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

그게 다야 :)


문제는 텍스트가 실제로 예제에서 완전히 불투명하다는 것입니다. p 태그 내부에는 완전 불투명도가 있지만 p 태그는 단지 반투명입니다.

반투명 PNG 배경 이미지를 CSS로 구현하는 대신 추가하거나 텍스트 및 div를 2 개의 요소로 분리하고 텍스트를 상자 위로 이동 (예 : 음수 여백) 할 수 있습니다.

그렇지 않으면 불가능합니다.

편집하다:

Chris가 언급 한 것처럼 투명성이있는 PNG 파일을 사용하는 경우 성가신 Internet Explorer에서 작동하도록 JavaScript 해결 방법을 사용해야합니다.


반투명 한 PNG 이미지를 사용하거나 CSS3를 사용하십시오.

background-color:rgba(255,0,0,0.5);

다음은 css3.info, Opacity, RGBA 및 타협 (2007-06-03)의 기사입니다.


순수한 CSS 3 : rgba(red, green, blue, alpha) 를 사용할 수 있습니다. alpha 는 원하는 투명도 수준입니다. JavaScript 또는 jQuery는 필요 없습니다.

다음은 그 예입니다.

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}

요소의 배경을 반투명으로 만들지 만 요소의 내용 (텍스트 및 이미지)은 불투명하게 만듭니다. 해당 이미지에 대한 CSS 코드를 작성해야하며 불투명도라는 최소 속성 값을 하나 추가해야합니다. 예

.image{
   position: relative;
   background-color: cyan;
  opacity: 0.7;
}

// 값이 작 으면 투명도가 더 높아지고 값이 작을수록 투명도가됩니다.


이것은 CSS 3을 사용하지 않고 내가 생각해 낼 수있는 최상의 솔루션입니다. 그리고 Firefox, Chrome, Internet Explorer에서 잘 보입니다.

컨테이너 DIV와 두 개의 하위 DIV를 동일한 레벨에 넣습니다. 하나는 내용 용이고 다른 하나는 백그라운드 용입니다. 그리고 CSS를 사용하여 배경에 자동으로 크기를 맞추어 내용을 맞추고 배경을 실제로 z-index를 사용하여 배치합니다.

    .container {
      position: relative;
    }
    .content {
      position: relative;
      color: White;
      z-index: 5;
    }
    .background {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: Black;
      z-index: 1;
      /* These three lines are for transparency in all browsers. */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      filter: alpha(opacity=50);
      opacity: .5;
    }
<div class="container">
  <div class="content">
    Here is the content.
    <br />Background should grow to fit.
  </div>
  <div class="background"></div>
</div>


잠시 뒤로, 저는 CSS와의 크로스 브라우저 배경 투명성 에 대해 썼습니다.

엽기적으로 Internet Explorer 6에서는 배경을 투명하게 만들고 텍스트를 완전히 불투명하게 유지할 수 있습니다. 다른 브라우저의 경우 투명 PNG 파일을 사용하는 것이 좋습니다.


Less 를 사용하는 경우 fade(color, 30%) 사용할 수 있습니다.



반투명 한 .png 를 사용하는 것이 좋습니다 .

Photoshop 열고 2x2 픽셀 이미지 ( 1x1 을 선택하면 Internet Explorer 버그가 발생할 수 있음 )를 만들고 녹색으로 채우고 "레이어 탭"의 불투명도를 60 %로 설정하면됩니다. 그런 다음 저장하고 배경 이미지로 만드십시오.

<p style="background: url(green.png);">any text</p>

물론, 멋진 Internet Explorer 6 제외하고는 멋지게 작동합니다. 더 나은 수정 방법이 있지만 빠른 해킹이 있습니다.

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}

배경색 : rgba (255,0,0,0.5); 위에서 언급 한대로 단순히 넣어 최고의 답변입니다. 2013 년에도 CSS3 사용은 간단하지 않습니다. 각 브라우저에서 다양한 지원 수준이 반복 될 때마다 변경되기 때문입니다.

background-color 은 모든 주요 브라우저에서 지원되지만 (CSS3의 새로운 기능은 아님) [1] 알파 투명도는 까다 롭습니다. 특히 버전이 9 이전의 Internet Explorer에서는 버전 5.1 이전의 Safari에서 테두리 색상이 사용되었습니다. [2]

Compass 또는 SASS 와 같은 것을 사용하면 실제로 제작 및 플랫폼 간 호환성을 향상시킬 수 있습니다.

[1] W3Schools : CSS 배경색 속성

[2] 노먼의 블로그 : 브라우저 지원 점검 목록 CSS3 (2012 년 10 월)





opacity