Cách giảm độ sáng của ảnh trong CSS

105

Tôi muốn giảm độ sáng hình ảnh trong CSS. Tôi đã tìm kiếm rất nhiều nhưng tất cả những gì tôi có là về cách thay đổi độ mờ, nhưng điều đó làm cho hình ảnh sáng hơn. Ai giúp tôi với ?

css 
— Shadi
nguồn
bạn có thể sử dụng độ mờ thuộc tính
— Satinder singh
Tôi sử dụng nó nhưng nó làm tăng độ sáng ...
— Shadi
câu trả lời được chấp nhận hoạt động tốt, nhưng cũng có một filterhiệu ứng tiêu chuẩn CSS mới mà bạn sẽ muốn lưu ý trong tương lai. Hãy xem câu trả lời của tôi.
— Spudley,
1
@shady, bạn có thể vui lòng xem lại câu hỏi này để đánh dấu một trong những câu trả lời đưa ra các giải pháp liên quan đến bộ lọc là đúng. Câu trả lời bạn đánh dấu đúng sẽ là cách để làm điều đó trong tiếng nói 2006.
— Wes Chế độ

Câu trả lời:

175

Tính năng bạn đang tìm kiếm là filter. Nó có khả năng thực hiện một loạt các hiệu ứng hình ảnh, bao gồm cả độ sáng:

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

Bạn có thể tìm thấy một bài viết hữu ích về nó tại đây: http://www.html5rocks.com/en/tutorials/filters/und hieu-css/

Một cái khác: http://davidwalsh.name/css-filters

Và quan trọng nhất, thông số kỹ thuật W3C: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

Lưu ý rằng đây là thứ chỉ mới xuất hiện gần đây trong CSS như một tính năng. Nó có sẵn, nhưng một số lượng lớn các trình duyệt hiện có sẽ không hỗ trợ nó nêu ra, và những người làm hỗ trợ nó sẽ đòi hỏi một tiền tố nhà cung cấp (ví dụ -webkit-filter:, -moz-filter, vv).

Cũng có thể thực hiện các hiệu ứng bộ lọc như thế này bằng cách sử dụng SVG. Hỗ trợ SVG cho những hiệu ứng này được thiết lập tốt và được hỗ trợ rộng rãi (thông số kỹ thuật bộ lọc CSS đã được lấy từ thông số kỹ thuật SVG hiện có)

Cũng lưu ý rằng điều này không được nhầm lẫn với filterkiểu độc quyền có sẵn trong các phiên bản IE cũ (mặc dù tôi có thể dự đoán sự cố với xung đột không gian tên khi kiểu mới giảm tiền tố nhà cung cấp của nó).

Nếu không có cách nào phù hợp với bạn, bạn vẫn có thể sử dụng opacitytính năng hiện có, nhưng không phải theo cách bạn đang nghĩ: chỉ cần tạo một phần tử mới với màu tối đồng nhất, đặt nó lên trên hình ảnh của bạn và làm mờ nó bằng cách sử dụng opacity. Hiệu ứng sẽ là ảnh phía sau bị tối.

Cuối cùng, bạn có thể kiểm tra sự hỗ trợ của trình duyệt filter tại đây .

— Spudley
nguồn
32

OP muốn giảm độ sáng chứ không phải tăng. Độ mờ làm cho hình ảnh trông sáng hơn, không tối hơn.

Bạn có thể làm điều này bằng cách phủ một div màu đen lên hình ảnh và đặt độ mờ của 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>

BẢN GIỚI THIỆU

— sachleen
nguồn
24
Độ mờ không làm cho bất kỳ thứ gì sáng hơn hoặc tối hơn. Nó thay đổi độ trong suốt của đối tượng. Việc điều này có tác dụng làm cho thứ gì đó sáng hơn hay tối hơn hay không sẽ phụ thuộc vào màu nền đằng sau mục mà bạn đang thay đổi độ mờ. Trái ngược với những gì bạn nói, bạn có thể làm cho thứ gì đó tối hơn bằng cách tăng độ mờ nếu bạn đặt nó trên nền đen. Hình ảnh trong suốt 99% trên nền đen sẽ xuất hiện gần như màu đen. Do đó, tôi không hiểu lý do tại sao cần có một div lớp phủ riêng. Bạn chỉ có thể đặt nó trên BG màu đen. Ví dụ: jsbin.com/isemec/1/edit
— NickG
@NickG Tôi đã nói rằng giả sử nền trắng. Những gì bạn đã làm giống như mã của tôi, chỉ khác là tôi đặt một lớp phủ màu đen bán trong suốt lên trên hình ảnh và bạn có một nền đen mờ đục với một hình ảnh nửa trong suốt ở trên.
— sachleen
17

Tóm lại, đặt màu đen phía sau hình ảnh và giảm độ mờ. Bạn có thể làm điều này bằng cách bao bọc hình ảnh trong một div, sau đó giảm độ mờ của hình ảnh.

Ví dụ:

<!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>

Đây là một JSFiddle.

— JL235
nguồn
15

Bạn đã có thể sử dụng:

filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
— Nahomy Atias
nguồn
9
Chính sách "hãy ném tiền tố chỉ trong trường hợp" này là sai. Thứ nhất, nếu Opera đã từng hỗ trợ thì nó sẽ không có -o-(Opera sử dụng Webkit / Blink bây giờ), thứ hai, Firefox chuyển thẳng vào không có tiền tố filter, thứ ba, bạn có thứ tự sai, không có tiền tố phải là thứ cuối cùng, thứ tư, cú pháp cho IE -ms-filterlà khác ( progid:DXImageTransform, v.v.), thứ năm, cú pháp cho Firefox khác và yêu cầu SVG ( Xem tài liệu ), thứ sáu, các tính năng mới không có khả năng có tiền tố vì các nhà cung cấp nhận ra ý tưởng đó tệ đến mức nào
— Camilo Martin
5
@CamiloMartin, thì bạn nên cung cấp câu trả lời đầy đủ hơn cho câu hỏi này vì nó vẫn chưa được trả lời hoàn chỉnh.
— Chế độ Wes
-webkit-filter: độ sáng () / -webkit-filter: tương phản () hoạt động. Đây là một câu trả lời thích hợp cho câu hỏi.
— Shilpa
bạn có thể sử dụng nó trong mixin sass như thế này: gist.github.com/johnferrie/3836468
— Erez Lieberman
6

Với CSS3, chúng ta có thể dễ dàng điều chỉnh một hình ảnh. Nhưng hãy nhớ điều này không thay đổi hình ảnh. Nó chỉ hiển thị hình ảnh đã điều chỉnh.

Xem mã sau để biết thêm chi tiết.

Để làm cho hình ảnh có màu xám:

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

Để tạo ra một cái nhìn màu nâu đỏ:

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

Để điều chỉnh độ sáng:

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

Để điều chỉnh độ tương phản:

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

Để làm mờ hình ảnh:

    img {
     -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
  }
— Raj Sharma
nguồn
1
Vui lòng không đăng cùng một câu trả lời cho nhiều câu hỏi: câu trả lời đó không phù hợp cho tất cả hoặc các câu hỏi trùng lặp nên được gắn cờ / đóng như vậy.
— kleopatra
2

Nếu bạn có hình nền, bạn có thể thực hiện việc này: Đặt gradient rgba () trên hình nền.

.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>
Mở rộng đoạn mã

— Sébastien Gicquel
nguồn
thông minh. Tôi cần một giải pháp để làm tối hình nền và tất cả các câu trả lời khác sẽ làm tối toàn bộ div.
— nuander
0

hãy thử điều này nếu bạn cần chuyển đổi hình ảnh màu đen thành màu trắng:

.classname{
    filter: brightness(0) invert(1);
}
— Rizo
nguồn
-3

Giống

.classname
{
 opacity: 0.5;
}
— Satinder singh
nguồn
cảm ơn nhưng điều đó tăng độ sáng không giảm nó !!
— Shadi
Nó phụ thuộc vào màu nền.
— apocalypse,
đúng @zgnilec của nó phụ thuộc vào màu nền ... nếu bạn đặt nó đen độ sáng của hình ảnh sẽ được giảm
— Shadi
này không làm việc để tăng độ sáng cho hơn 100%, độ mờ đục chỉ có thể nhận được lên đến 1
— Javis Perez
Là một người không nói tiếng Anh, tôi thực sự muốn tìm kiếm "độ mờ" và dù sao cũng đã được đề xuất câu trả lời này. Ngay cả khi câu trả lời này không trả lời được câu hỏi, bạn nên biết điều đó opacitylàm tăng độ sáng. ;)
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.