Hướng dẫn css filter brightness only background color - độ sáng bộ lọc css chỉ màu nền

Question

Tôi muốn thay đổi độ sáng của nền của Div, mà không ảnh hưởng đến các nội dung khác trong DIV.

Nội dung chính Show

Làm cách nào để làm mờ độ sáng của hình nền của tôi trong CSS?
Làm cách nào để giảm độ sáng của nền?
Làm cách nào để làm mờ màu nền trong CSS?
Bộ lọc WebKit trong CSS là gì?

Khi tôi áp dụng bộ lọc độ sáng di chuột trên DIV, các yếu tố khác trong đó cũng bị ảnh hưởng. Mà tôi không muốn.

Giải pháp khác tôi có chỉ đơn giản là thay thế nền của Div bằng một bức ảnh được chỉnh sửa. Nhưng điều đó yêu cầu gấp đôi lưu trữ, mà tôi không thích.

Có cách nào để thay đổi chỉ độ sáng của hình ảnh nền không?

JSfiddle

    
    
        Random unaffected text
    


    
    
        Random AFFECTED text (it glows)
    


#replace {
width:700px;
height:465px;
background-image:url('http://i42.tinypic.com/351dff5.jpg');
}

#brightnessfilter {
    width:700px;
    height:465px;
    background-image:url('http://i42.tinypic.com/351dff5.jpg');
}

#brightnessfilter:hover {
     -webkit-filter: brightness(1.3);
-moz-filter: brightness(1.3);
-o-filter:  brightness(1.3);
-ms-filter:  brightness(1.3);
}

#transparent {
    position:relative;
    top:400px;
    width:700px;
    height:65px;
    background-color:rgba(0,0,0,.5);
    border-radius:8px;
}

#text {
    color:white;
    font-weight:bold;
    position:relative;
    top:9px;
    left:9px;
    font-size:16px;
}

#replace:hover {
    background-image:url('http://i40.tinypic.com/2cft7dl.jpg');
}

Trên đây là một liên kết đến một câu đố với hai nỗ lực của tôi trong việc tạo hiệu ứng mong muốn. Nhưng cả hai đều có một bất lợi trong việc sử dụng nó.

Cảm ơn trước!

Đã hỏi ngày 4 tháng 11 năm 2013 lúc 17:20Nov 4, 2013 at 17:20

1

Để áp dụng độ sáng chỉ vào hình nền, bạn có thể đặt hình ảnh vào một Div được định vị tuyệt đối để độ sáng chỉ ảnh hưởng đến phần tử này.

Đặt chiều cao và chiều rộng lên 100% trên #Image Div mới sẽ cho phép nó lấp đầy #BrightnessFilter Div để bảo tồn bố cục từ ví dụ ban đầu của bạn.

#brightnessfilter {
  width: 700px;
  height: 465px;
  position: relative;
}

#image {
  background-image: url('http://i42.tinypic.com/351dff5.jpg');
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
}

#brightnessfilter:hover #image {
  -webkit-filter: brightness(1.3);
  -moz-filter: brightness(1.3);
  -o-filter: brightness(1.3);
  -ms-filter: brightness(1.3);
}

#transparent {
  position: relative;
  top: 400px;
  width: 700px;
  height: 65px;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 8px;
}

#text {
  color: white;
  font-weight: bold;
  position: relative;
  top: 9px;
  left: 9px;
  font-size: 16px;
}

#replace:hover {
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.01) 100%), url('http://i40.tinypic.com/2cft7dl.jpg');
}


  
  
    Random AFFECTED text (it glows)

Đã trả lời ngày 1 tháng 1 lúc 16:57Jan 1 at 16:57

ByronbyronByron

5533 Huy hiệu bạc10 Huy hiệu Đồng3 silver badges10 bronze badges

Cảm ơn vì sự giúp đỡ. Nhưng tất nhiên ngay sau khi tôi đăng bài này, tôi đã nảy ra một ý tưởng.

Tôi sử dụng CSS để thay đổi toàn bộ nội dung DIVS thành độ sáng 1.3 và hơn là tôi thay đổi độ sáng của văn bản thành 0,8 thành thậm chí nó.

Như thế này:

JSfiddle


    
        Random AFFECTED text (it glows)
    


#brightnessfilter {
    width:700px;
    height:465px;
    background-image:url('http://i42.tinypic.com/351dff5.jpg');

}

#brightnessfilter:hover {
     -webkit-filter: brightness(1.3);
-moz-filter: brightness(1.3);
-o-filter:  brightness(1.3);
-ms-filter:  brightness(1.3);
}

#brightnessfilter:hover #text {
     -webkit-filter: brightness(0.8);
-moz-filter: brightness(0.8);
-o-filter:  brightness(0.8);
-ms-filter:  brightness(0.8);
}

#transparent {
    position:relative;
    top:400px;
    width:700px;
    height:65px;
    background-color:rgba(0,0,0,.5);
    border-radius:8px;
}

#text {
    color:white;
    font-weight:bold;
    position:relative;
    top:9px;
    left:9px;
    font-size:16px;
}

Trên đây là một liên kết đến một câu đố với hai nỗ lực của tôi trong việc tạo hiệu ứng mong muốn. Nhưng cả hai đều có một bất lợi trong việc sử dụng nó.

Cảm ơn trước!Nov 4, 2013 at 17:46

user2953063user2953063user2953063

Đã hỏi ngày 4 tháng 11 năm 2013 lúc 17:202 gold badges6 silver badges10 bronze badges

4

Để áp dụng độ sáng chỉ vào hình nền, bạn có thể đặt hình ảnh vào một Div được định vị tuyệt đối để độ sáng chỉ ảnh hưởng đến phần tử này.

Đặt chiều cao và chiều rộng lên 100% trên #Image Div mới sẽ cho phép nó lấp đầy #BrightnessFilter Div để bảo tồn bố cục từ ví dụ ban đầu của bạn.

Đã trả lời ngày 1 tháng 1 lúc 16:57Dec 30, 2019 at 14:01

Hướng dẫn css filter brightness only background color - độ sáng bộ lọc css chỉ màu nền

Byronbyron

body {
  background: linear-gradient(
      90deg,
      rgba(255, 140, 0, 0.459) 4%,
      rgba(196, 209, 8, 0.616) 53%,
      rgba(255, 132, 0, 0.692) 100%
    ),
    url(img/sunset1.jpg);
  background-size: cover;
  overflow-y: hidden;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
}

5533 Huy hiệu bạc10 Huy hiệu ĐồngDec 1, 2021 at 11:11

2

Cảm ơn vì sự giúp đỡ. Nhưng tất nhiên ngay sau khi tôi đăng bài này, tôi đã nảy ra một ý tưởng.

#brightnessfilter {
    position:relative;
    width:700px;
    height:465px;
}

#brightnessfilter:before{
    display:block;
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-image:url('http://i42.tinypic.com/351dff5.jpg');
}

#brightnessfilter:hover:before {
     -webkit-filter: brightness(1.3);
    -moz-filter: brightness(1.3);
    -o-filter:  brightness(1.3);
    -ms-filter:  brightness(1.3);
}

Tôi sử dụng CSS để thay đổi toàn bộ nội dung DIVS thành độ sáng 1.3 và hơn là tôi thay đổi độ sáng của văn bản thành 0,8 thành thậm chí nó.Dec 8, 2021 at 1:21

Như thế này:Amirreza Noori

Tôi chỉ không biết số chính xác 0,7 có vẻ ít sáng hơn bình thường 0,8 dường như rất ít để sáng.1 gold badge4 silver badges19 bronze badges

Đã trả lời ngày 4 tháng 11 năm 2013 lúc 17:46

.demo-wrap {
  overflow: hidden;
  position: relative;
}

.demo-bg {
  opacity: 0.6;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.demo-content {
  position: relative;
}


  
  
    Hello World!

https://www.digitalocean.com/community/tutorials/how-to-change-a-css-background-images-opacity

4272 Huy hiệu vàng6 Huy hiệu bạc10 Huy hiệu đồngFeb 8 at 6:46

Làm cách nào để làm mờ độ sáng của hình nền của tôi trong CSS?

Để đặt độ sáng hình ảnh trong CSS, hãy sử dụng độ sáng bộ lọc (%). Hãy nhớ rằng, giá trị 0 làm cho hình ảnh màu đen, 100% là cho hình ảnh gốc và mặc định. Nghỉ ngơi, bạn có thể đặt bất kỳ giá trị nào bạn chọn, nhưng các giá trị trên 100% sẽ làm cho hình ảnh sáng hơn.use filter brightness(%). Remember, the value 0 makes the image black, 100% is for original image and default. Rest, you can set any value of your choice, but values above 100% would make the image brighter.

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

Điều chỉnh độ sáng của hình ảnh Nhấp vào hình ảnh mà bạn muốn thay đổi độ sáng cho.Trong các công cụ hình ảnh, trên tab Định dạng, trong nhóm điều chỉnh, nhấp vào độ sáng.Nhấp vào tỷ lệ phần trăm độ sáng mà bạn muốn.Under Picture Tools, on the Format tab, in the Adjust group, click Brightness. Click the brightness percentage that you want.

Làm cách nào để làm mờ màu nền trong CSS?

Nếu bạn muốn độ mờ có màu, bạn sẽ cần thêm thuộc tính nền với giá trị RGBA.Hãy chắc chắn rằng alpha (độ mờ) nhỏ hơn 1, vì vậy chúng ta có thể nhìn qua màu sắc.Sau đó, chúng tôi sẽ thêm thuộc tính Bộ lọc Phông nền Magical và cung cấp cho nó một giá trị mờ (8px).add the background property with an rgba value. Make sure that the alpha (opacity) is less than 1, so we can see through the color. Then we'll add the magical backdrop-filter CSS property and give it a value of blur(8px) .

Bộ lọc WebKit trong CSS là gì?

Thuộc tính CSS bộ lọc áp dụng các hiệu ứng đồ họa như mờ hoặc chuyển màu sang một phần tử.Các bộ lọc thường được sử dụng để điều chỉnh kết xuất hình ảnh, hình nền và đường viền.Bao gồm trong tiêu chuẩn CSS là một số chức năng đạt được các hiệu ứng được xác định trước.applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. Included in the CSS standard are several functions that achieve predefined effects.

programming css CSS filter background-color Change background brightness CSS dark background-color CSS color percentage CSS brightness

Hướng dẫn css filter brightness only background color - độ sáng bộ lọc css chỉ màu nền

Hello World!

Làm cách nào để làm mờ độ sáng của hình nền của tôi trong CSS?

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

Làm cách nào để làm mờ màu nền trong CSS?

Bộ lọc WebKit trong CSS là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội