CSS에서 이미지 밝기를 줄이고 싶습니다. 많이 검색했지만 불투명도를 변경하는 방법에 관한 것이지만 이미지가 더 밝아집니다. 누구든지 나를 도울 수 있습니까?
답변
찾고있는 기능은 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 여기 에서 브라우저 지원을 확인할 수 있습니다 .
답변
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>답변
즉, 이미지 뒤에 검은 색을 배치하고 불투명도를 낮 춥니 다. 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입니다.
답변
다음을 사용할 수 있습니다.
filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);답변
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);
}답변
오늘 찾았습니다. 정말 도움이되었습니다. http://www.propra.nl/playground/css_filters/
필요한 것은 CSS 스타일에 이것을 추가하는 것입니다. :
div {-webkit-filter: brightness(57%)}답변
배경 이미지가있는 경우 다음을 수행 할 수 있습니다. 배경 이미지에 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>