CSS에서 이미지 밝기를 줄이는 방법

105

CSS에서 이미지 밝기를 줄이고 싶습니다. 많이 검색했지만 불투명도를 변경하는 방법에 관한 것이지만 이미지가 더 밝아집니다. 누구든지 나를 도울 수 있습니까?

css 
— Shadi
소스
당신은 속성의 불투명도를 사용할 수 있습니다
— Satinder을 싱
그것을 사용하지만 ... 밝기 향상
— 샤디
허용되는 답변은 잘 작동하지만 filter미래에 대해 알고 싶은 새로운 CSS 표준 효과도 있습니다. 내 대답을 참조하십시오.
— Spudley
1
@shady,이 질문을 다시 방문하여 필터와 관련된 솔루션을 제공하는 답변 중 하나를 올바른 것으로 표시해 주시겠습니까? 당신이 올바른 표시 대답은 말 2006 년에 그것을 할 수있는 방법이 될 것입니다
— 웨스 모드

답변:

175

찾고있는 기능은 filter입니다. 밝기를 포함한 다양한 이미지 효과를 수행 할 수 있습니다.

#myimage {
    filter: brightness(50%);
}

여기에서 유용한 기사를 찾을 수 있습니다. http://www.html5rocks.com/en/tutorials/filters/understanding-css/

또 다른 : http://davidwalsh.name/css-filters

그리고 가장 중요한 것은 W3C 사양 : https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

이것은 최근에야 CSS에 기능으로 도입 된 것입니다. 사용할 수 있지만 아직 많은 브라우저에서 지원하지 않으며이를 지원하는 브라우저에는 공급 업체 접두사가 필요합니다 (예 -webkit-filter:: -moz-filter, 등).

SVG를 사용하여 이와 같은 필터 효과를 수행 할 수도 있습니다. 이러한 효과에 대한 SVG 지원은 잘 확립되어 있으며 널리 지원됩니다 (CSS 필터 사양은 기존 SVG 사양에서 가져옴).

또한 이것은 filter이전 버전의 IE에서 사용할 수 있는 독점 스타일 과 혼동해서는 안됩니다 (새 스타일이 공급 업체 접두사를 삭제하면 네임 스페이스 충돌 문제를 예측할 수 있지만).

어느 것도 효과가 없다면 기존 opacity기능을 계속 사용할 수 있지만 생각하는 방식은 아닙니다. 단순히 어두운 단색으로 새 요소를 만들고 이미지 위에 배치 한 다음을 사용하여 페이드 아웃합니다 opacity. 그 효과는 뒤에있는 이미지가 어두워지는 것입니다.

마지막으로 filter 여기 에서 브라우저 지원을 확인할 수 있습니다 .

— Spudley
소스
32

OP는 밝기를 높이 지 않고 낮추기를 원합니다 . 불투명도는 이미지를 더 어둡게하는 것이 아니라 더 밝게 만듭니다.

이미지 위에 검정색 div를 오버레이하고 해당 div의 불투명도를 설정하면됩니다.

<style>
#container {
    position: relative;
}
div.overlay {
    opacity: .9;
    background-color: black;
    position: absolute;
    left: 0; top: 0; height: 256px; width: 256px;
}
</style>

Normal:<br />
<img src="http://i.imgur.com/G8eyr.png">
<br />
Decreased brightness:<br />
<div id="container">
    <div class="overlay"></div>
    <img src="http://i.imgur.com/G8eyr.png">
</div>

데모

— 새 클린
소스
24
불투명도는 아무것도 더 밝거나 어둡게 만들지 않습니다. 개체의 투명도를 변경합니다. 이것이 무언가를 더 밝게 또는 더 어둡게 만드는 효과가 있는지 여부는 불투명도를 변경하는 항목 뒤에있는 배경색에 따라 다릅니다. 당신이 말하는 것과는 달리 검은 배경에 놓으면 불투명도를 높여서 더 어둡게 만들 수 있습니다. 검정색 배경에 99 % 투명한 이미지는 거의 검정색으로 나타납니다. 따라서 별도의 오버레이 div가 필요한 이유를 알지 못합니다. 검정색 BG에 설정하면됩니다. 예 : jsbin.com/isemec/1/edit
— NickG
@NickG 나는 흰색 배경을 가정한다고 말했습니다. 당신이 한 일은 내 코드와 똑같습니다. 이미지 위에 반투명 검정색 오버레이를 놓고 위에 반투명 이미지가있는 불투명 검정색 배경이 있습니다.
— sachleen 2012
17

즉, 이미지 뒤에 검은 색을 배치하고 불투명도를 낮 춥니 다. div 내에서 이미지를 래핑 한 다음 이미지의 불투명도를 낮추면됩니다.

예를 들면 :

<!DOCTYPE html>

<style>
    .img-wrap {
        background: black;
        display: inline-block;
        line-height: 0;
    }
        .img-wrap > img {
            opacity: 0.8;
        }
</style>

<div class="img-wrap">
    <img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" />
</div>

다음 은 JSFiddle입니다.

— JL235
소스
15

다음을 사용할 수 있습니다.

filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
— 나 호미 아티 아스
소스
9
"만일 경우를 대비하여 접두사를 던지자"라는이 정책은 잘못되었습니다. 첫째, Opera가 지원한다면 -o-(Opera는 지금 Webkit / Blink를 사용합니다), 둘째, Firefox는 곧바로 non-prefixed filter, 셋째, 순서가 잘못되었습니다. non-prefixed는 마지막 하나, 넷째, IE의 구문 -ms-filter이 다릅니다 ( progid:DXImageTransform등), 다섯 번째, Firefox의 구문이 다르며 SVG가 필요합니다 ( 문서 참조 ). 여섯 번째, 벤더가 아이디어가 얼마나 나쁘다는 것을 깨달았 기 때문에 새로운 기능에 접두사를 붙일 가능성이 낮습니다.
— Camilo Martin
5
@CamiloMartin, 아직 완전히 대답하지 않았기 때문에이 질문에 대해 더 완전한 대답을 제공했을 것입니다.
— Wes Modes
-webkit-filter : 밝기 () / -webkit-filter : 대비 () 작동합니다. 이것은 질문에 대한 적절한 대답입니다.
— Shilpa
이 같은 말대꾸 믹스 인에서 사용할 수 있습니다 : gist.github.com/johnferrie/3836468
— Erez 리버만
6

CSS3를 사용하면 이미지를 쉽게 조정할 수 있습니다. 그러나 이것이 이미지를 변경하지 않는다는 것을 기억하십시오. 조정 된 이미지 만 표시합니다.

자세한 내용은 다음 코드를 참조하십시오.

이미지를 회색으로 만들려면 :

img {
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
}

세피아 느낌을 주려면 :

    img {
     -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
}

밝기를 조정하려면 :

 img {
     -webkit-filter: brightness(50%);
     -moz-filter: brightness(50%);  
  }

대비를 조정하려면 :

 img {
     -webkit-filter: contrast(200%);
     -moz-filter: contrast(200%);    
}

이미지를 흐리게하려면 :

    img {
     -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
  }
— Raj Sharma
소스
1
여러 질문에 대해 똑같은 답변을 게시하지 마십시오. 모든 질문에 적합하지 않거나 질문이 중복되어 플래그가 지정 / 종료되어야합니다.
— kleopatra
2

배경 이미지가있는 경우 다음을 수행 할 수 있습니다. 배경 이미지에 rgba () 그래디언트를 설정합니다.

.img_container {
  float: left;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border : 1px solid #fff;
}

.image_original {
  background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.image_brighness {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* the gradient on top, adjust color and opacity to your taste */
  url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.img_container p {
  color: #fff;
  font-size: 28px;
}
<div class="img_container image_original">
  <p>normal</p>
</div>
<div class="img_container image_brighness ">
  <p>less brightness</p>
</div>
스 니펫 확장

— Sébastien Gicquel
소스
우수한. 배경 이미지를 어둡게하는 솔루션이 필요했고 다른 모든 답변은 전체 div를 어둡게했습니다.
— nuander
0

검정색 이미지를 흰색으로 변환해야하는 경우 다음을 시도하십시오.

.classname{
    filter: brightness(0) invert(1);
}
— Rizo
소스
-3

처럼

.classname
{
 opacity: 0.5;
}
— 사틴 더 싱
소스
고맙지 만 밝기를 높이는 것은 감소하지 않습니다 !!
— 샤디
배경색에 따라 다릅니다.
— apocalypse
오른쪽 @zgnilec 배경색에 따라 달라집니다 ... 검정색으로 넣으면 이미지의 밝기가 감소합니다
— Shadi
이 100 % 이상에 대한 밝기를 증가 작동하지 않습니다, 불투명도는 1까지 얻을 수 있습니다
— Javis 페레즈
비영어권 사용자이기 때문에 실제로 "불투명도"를 검색하고 싶었고 어쨌든이 답변을 제안 받았습니다. 이 대답이 질문에 대답하지 않더라도 opacity밝기 가 증가 한다는 것을 아는 것이 좋습니다 . ;)
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.