Hướng dẫn how do i dim the brightness of my background image in css? - làm cách nào để làm mờ độ sáng của hình nền của tôi trong css?

Tôi tự hỏi nếu có thể thay đổi độ sáng của:

 body{
 background-image:url();
 }

Sử dụng HTML/CSS. Lý do tôi muốn thay đổi nó, là vì tôi chỉ dành một thời gian khá dài để tạo ra hình ảnh, nhưng khi tôi đưa nó lên trang web, nó đột nhiên sáng gấp đôi. Tôi đã so sánh tệp gốc và tệp được nhập vào trang web và cả hai đều có nhiều màu xanh khác nhau.

Có lý do gì cho việc này, và có cách nào tôi có thể thay đổi độ sáng không?

Thanks.

Đã hỏi ngày 26 tháng 1 năm 2014 lúc 12:25Jan 26, 2014 at 12:25

3

Bạn có thể có nhiều lớp hơn trong "nền" như thế này:

.someObj{ background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(myBgImage.png); }

Điều này sẽ đặt 50% màu trắng lên hình ảnh gốc làm cho nó sáng hơn.

Chức năng cấp độ tuyến tính phải được sử dụng, nếu không nó không hoạt động. function has to be used, otherwise it doesn't work.

Ngoài ra, bạn có thể sử dụng:

body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: rgba(0,0,0,0.1);
  pointer-events: none;
}

Và điều này là tốt hơn cho khả năng duy trì mã.

Đã trả lời ngày 21 tháng 12 năm 2017 lúc 9:15Dec 21, 2017 at 9:15

1

Đây sẽ là một lựa chọn, nhưng nó không thực tế lắm và sẽ không hoạt động trong các trình duyệt cũ hơn:

body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: rgba(0,0,0,0.1);
  pointer-events: none;
}

Hoặc để kiểm soát màu sắc tốt hơn, hãy thử màu

body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: rgba(0,0,0,0.1);
  pointer-events: none;
}

body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: hsla(180,0%,50%,0.25);
  pointer-events: none;
}

Thực sự, tốt hơn là chơi với hình ảnh trong trình chỉnh sửa hình ảnh cho đến khi bạn nhận được kết quả trình duyệt bạn muốn.

Đã trả lời ngày 26 tháng 1 năm 2014 lúc 12:45Jan 26, 2014 at 12:45

ralph.mralph.mralph.m

12.9k3 Huy hiệu vàng22 Huy hiệu bạc29 Huy hiệu đồng3 gold badges22 silver badges29 bronze badges

1

Không có cách nào để làm điều này hoạt động trong mọi trình duyệt, nhưng nếu bạn muốn, bạn có thể làm điều đó trong các trình duyệt WebKit (Chrome, Safari, Opera), bằng cách sử dụng kiểu

body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: rgba(0,0,0,0.1);
  pointer-events: none;
}

img.lessBright {
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
}

Điều đó dẫn đến độ sáng được giảm xuống 80% trong các trình duyệt WebKit. Tôi khuyên bạn chỉ nên lưu một phiên bản khác của hình ảnh của bạn nếu bạn muốn làm điều này mặc dù.

Đã trả lời ngày 26 tháng 1 năm 2014 lúc 12:40Jan 26, 2014 at 12:40

Joeytje50Joeytje50Joeytje50

18.3K14 Huy hiệu vàng60 Huy hiệu bạc93 Huy hiệu Đồng14 gold badges60 silver badges93 bronze badges

2

1. Tạo một div trẻ em cho hình ảnh nền của cùng kích thước.
2. Đặt màu nền của con với RGBA, bao gồm kênh alpha (độ mờ).
3. Đặt độ mờ phù hợp trong khoảng từ 0 đến 1. 1 = mờ, 0 = trong suốt, 0,5 = mờ

HTML:

CSS:

#primary_feature{
  background-image: url("../assets/images/misc/laptop.png");
}
.feature{
  background:rgba(0,0,0,0.6);
}

Đã trả lời ngày 9 tháng 7 năm 2020 lúc 12:21Jul 9, 2020 at 12:21

Sam_Sam_Sam_

865 huy hiệu đồng5 bronze badges

Một bản cập nhật cho câu trả lời khác.

Bạn cũng có thể sử dụng bộ lọc phông nền để có hiệu quả tốt hơn nhiều. Nó có thể sử dụng bất kỳ

body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: rgba(0,0,0,0.1);
  pointer-events: none;
}

body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: rgba(0,0,0,0.1);
  pointer-events: none;
}

Điều này có nghĩa là nền của bạn sẽ không được rửa sạch với màu trên đầu, thay vào đó nó sẽ ảnh hưởng trực tiếp đến nền cho một cái nhìn tự nhiên hơn trong khi vẫn giữ được tất cả các chi tiết.

Nhược điểm, hiện tại nó không được hỗ trợ trong Firefox, trừ khi các cài đặt thử nghiệm được bật. Nhưng điều đó sẽ sớm thay đổi và khi viết điều này, Firefox chỉ là 6,5% thị trường.

Tuy nhiên, nó được hỗ trợ đầy đủ trong Chrome

body {
content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    backdrop-filter: brightness(120%);
    pointer-events: none;
}

Đã trả lời ngày 24 tháng 9 năm 2019 lúc 1:02Sep 24, 2019 at 1:02

ElectronelectronElectron

8391 Huy hiệu vàng8 Huy hiệu bạc21 Huy hiệu đồng1 gold badge8 silver badges21 bronze badges

Tôi đặt một tấm bạt màu đen lên hình ảnh và thay đổi độ sáng:

c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(0,0,c.width,c.height); //as image size
ctx.fillStyle = "#000000" + brightness;
ctx.fill();

skara9

3.7811 Huy hiệu vàng5 Huy hiệu bạc19 Huy hiệu đồng1 gold badge5 silver badges19 bronze badges

Đã trả lời ngày 28 tháng 11 năm 2021 lúc 2:13Nov 28, 2021 at 2:13

DaverdaverDaveR

12 huy hiệu đồng2 bronze badges

Tôi đã có cùng một vấn đề, nhưng đó là với một GIF.

Cách giải quyết của tôi:

Tôi đã tạo ra một hình ảnh hình vuông màu đen rất nhỏ trong PowerPoint và đặt độ trong suốt của nó thành 50% và lưu nó dưới dạng một tệp có tên là "DimMerswitch.png"

Hơn tôi đã tham khảo rằng cái đầu tiên trong mã:

body {
background-image:url("dimmerswitch.png"), url("YourImage.png");
}

Đã trả lời ngày 24 tháng 2 năm 2017 lúc 6:06Feb 24, 2017 at 6:06

Bạn chỉ cần thực hiện Photoshop để giảm độ sáng nếu không có cách nào khác.

Đã trả lời ngày 18 tháng 6 năm 2016 lúc 11:33Jun 18, 2016 at 11:33

1

Làm thế nào để tôi làm tối một hình ảnh có nền trong CSS?

Làm cách nào để giảm độ sáng nền của tôi?

Làm cách nào để giảm độ tương phản hình ảnh trong CSS?